vue element-ui 表格的分页功能

html

分页核心代码：给 el-table 加

                          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)

上述方法适用于数据量较少时，一次请求获取所有的数据，然后对全部的数据进行操作。

UI表格的表头加背景色，加给

<el-table :header-cell-style="{background:'#ccc',color:'#000'}"

<el-table
  :data="
    tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
  "
  style="width: 100%"
>
  <el-table-column label="Date" prop="date"> </el-table-column>
  <el-table-column label="Name" prop="name"> </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
        >Edit</el-button
      >
      <el-button
        size="mini"
        type="danger"
        @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button
      >
    </template>
  </el-table-column>
</el-table>

<!-- 表格分页 -->
<!-- pager-count pager-count属性可以设置最大页码按钮数,超出折叠,默认为7-->
<!-- 注意：若数据是后端接口返回的则此时:total="pageCount"-->
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :pager-count="7"
  :current-page="currentPage"
  :page-sizes="[1, 3, 5, 10]"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="tableData.length > 0 ? tableData.length : null"
  background
  style="float: right; margin-top: 20px"
>
</el-pagination>

script

data数据

tableData: [
  {
    date: "2016-05-02",
    name: "王小虎",
    address: "上海市普陀区金沙江路 1518 弄",
  },
  {
    date: "2016-05-04",
    name: "222",
    address: "上海市普陀区金沙江路 1517 弄",
  },
  {
    date: "2016-05-01",
    name: "333",
    address: "上海市普陀区金沙江路 1519 弄",
  },
  {
    date: "2016-05-03",
    name: "4444",
    address: "上海市普陀区金沙江路 1516 弄",
  },
],

currentPage: 1,  //默认初始页
pagesize: 10,    //每页默认显示的数据
pageCount: 0,   //数据的总条数,如果数据是后端接口返回的，则此值需修改

methods方法

methods: {
  //表格编辑
  handleEdit(index, row) {
    console.log(index, row);
  },
  //表格删除
  handleDelete(index, row) {
    console.log(index, row);
  },
  //改变每页容纳的数据量
  handleSizeChange: function (size) {
    this.pagesize = size;
  },
  //切换页码
  handleCurrentChange: function (currentPage) {
    this.currentPage = currentPage;
  },
},