You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
1.5 KiB
64 lines
1.5 KiB
<template> |
|
<el-config-provider :locale="locale"> |
|
<el-table :data="tableData"> |
|
<el-table-column prop="account" label="用户名"></el-table-column> |
|
<el-table-column prop="createTime" label="注册时间"></el-table-column> |
|
<el-table-column prop="level" label="等级"></el-table-column> |
|
</el-table> |
|
<el-pagination |
|
v-model:currentpage="currentPage" |
|
:page-sizes="[5, 10]" |
|
:page-size="pageSize" |
|
layout="total, prev, pager, next, ->, jumper, sizes" |
|
:total="total" |
|
@current-change="handleCurrentChange" |
|
@size-change="handleSizeChange"></el-pagination> |
|
</el-config-provider> |
|
|
|
</template> |
|
|
|
<script> |
|
import locale from 'element-plus/es/locale/lang/zh-cn' |
|
|
|
const data = Array.from(Array(114), (v, i) => { |
|
return { |
|
account: "uaa" + (i + 1), |
|
createTime: new Date(Date.now() + Math.ceil(Math.random() * 1000)), |
|
level: Math.ceil(Math.random() * 10) |
|
} |
|
}) |
|
export default { |
|
name: "Table_Demo16", |
|
data() { |
|
return { |
|
locale, |
|
currentPage: 1, |
|
pageSize: 5, |
|
total: 0, |
|
tableData: [] |
|
}; |
|
}, |
|
created() { |
|
this.getData(1, this.pageSize); |
|
}, |
|
methods: { |
|
getData(page, pageSize) { |
|
this.tableData = data.slice((page - 1) * pageSize, page * pageSize) |
|
this.total = data.length |
|
}, |
|
handleCurrentChange(val) { |
|
this.currentPage = val |
|
this.getData(val, this.pageSize) |
|
}, |
|
handleSizeChange(val) { |
|
this.pageSize = val |
|
this.getData(this.currentPage, val) |
|
} |
|
} |
|
|
|
} |
|
</script> |
|
|
|
<style scoped> |
|
|
|
</style> |