element-table分页展示数据

element-table 是一个基于 Vue.js 的表格组件，可以用来展示数据并进行分页。以下是一个简单的示例：

首先，我们需要在 Vue.js 中引入 element-ui 和 element-table 组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { Table, TableColumn } from 'element-ui'

Vue.use(ElementUI)
Vue.component(Table.name, Table)
Vue.component(TableColumn.name, TableColumn)

然后，我们可以在模板中使用 element-table 组件来展示数据并进行分页：

<template>
  <div>
    <el-table :data="tableData" :default-sort="{prop: 'date', order: 'descending'}">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      v-if="total > 0"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total"
      :page-sizes="[10, 20, 30, 40]"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    fetchData() {
      // 发起请求获取数据
      // ...
      // 更新 tableData 和 total
      this.tableData = [...]
      this.total = ...
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.fetchData()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.fetchData()
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

在上面的示例中，我们通过 el-table 组件来展示数据，通过 el-pagination 组件来实现分页功能。其中，tableData 是通过请求后端接口获取的数据，total 表示数据总数，currentPage 和 pageSize 分别表示当前页码和每页显示的数据条数。当用户切换页码或每页显示的数据条数时，会触发 handleCurrentChange 和 handleSizeChange 方法，重新获取数据并更新 tableData 和 total。