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
1 year ago
|
<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>
|