<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>