[JavaScript知识库]vue+Element-ui之table和pagination的结合

在vue项目中使用element-ui的el-table和el-pagination组件，需要将两者结合起来，通过控制pagination来控制table数据的显示

1.在页面中防止el-table和el-pagination组件；

<template>
  <div style="width: 800px; height: 600px; background-color: #21f772">
      <!-- table -->
    <el-table
      stripe
      ref="multipleTable"
      :data="tableList"
      tooltip-effect="dark"
      style="width: 60%; position: absolute; top: 30px; left: 30px"
      height="400px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="id" label="标号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="hobby" label="爱好">
      </el-table-column>
    </el-table>

    <!-- pagination -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="10"
      :page-sizes="[10, 15, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.lists.length"
      style="position: absolute; top: 500px; left: 100px"
    >
    </el-pagination>
  </div>
</template>

2.我没有请请求后台数据获取全部的数组，采用假数据的形式操作，如若可能可以在将获取到的数组赋值给data中的lists数组即可，以下是我的data中的属性。tableList用来存储当前页table中要显示数据；currentPage表示当前显示第一页；sizes表示当前页的条数；

 lists: [
        { id: "001", name: "睿小宝", hobby: "play", age: "21" },
        { id: "002", name: "睿小宝", hobby: "play", age: "22" },
        { id: "003", name: "睿小宝", hobby: "play", age: "23" },
        { id: "004", name: "睿小宝", hobby: "play", age: "24" },
        { id: "005", name: "睿小宝", hobby: "play", age: "25" },
        { id: "006", name: "睿小宝", hobby: "play", age: "26" },
        { id: "007", name: "睿小宝", hobby: "play", age: "27" },
        { id: "008", name: "睿小宝", hobby: "play", age: "28" },
        { id: "009", name: "睿小宝", hobby: "play", age: "29" },
        { id: "0010", name: "睿小宝", hobby: "play", age: "30" },
        { id: "0011", name: "睿小宝", hobby: "play", age: "31" },
        { id: "0012", name: "睿小宝", hobby: "play", age: "32" },
        { id: "0013", name: "睿小宝", hobby: "play", age: "33" },
        { id: "0014", name: "睿小宝", hobby: "play", age: "34" },
        { id: "0015", name: "睿小宝", hobby: "play", age: "35" },
        { id: "0016", name: "睿小宝", hobby: "play", age: "36" },
        { id: "0017", name: "睿小宝", hobby: "play", age: "37" },
        { id: "0018", name: "睿小宝", hobby: "play", age: "38" },
        { id: "0019", name: "睿小宝", hobby: "play", age: "39" },
        { id: "0020", name: "睿小宝", hobby: "play", age: "40" },
        { id: "0021", name: "睿小宝", hobby: "play", age: "41" },
        { id: "0022", name: "睿小宝", hobby: "play", age: "42" },
        { id: "0023", name: "睿小宝", hobby: "play", age: "43" },
        { id: "0024", name: "睿小宝", hobby: "play", age: "44" },
        { id: "0025", name: "睿小宝", hobby: "play", age: "45" },
        { id: "0026", name: "睿小宝", hobby: "play", age: "46" },
        { id: "0027", name: "睿小宝", hobby: "play", age: "47" },
      ],
      tableList: [],
      currentPage: 1,
      sizes: "10",

3.pagination自带两个函数，可以获取到当前页条数和当前页页码。在handleSizeChange（）函数中可以拿到当前页需要的展示条数赋值给sizes，然后调用handleCurrentChange（）函数并传值让当前页展示第一页。然后在每次前进后退的时候，调用的是handleCurrentChange（）函数，在此函数中可以获得当前页的页码和展示的条数，采用数组的slice方法得到tableList数组，即可展示在table上。总条数就是lists数组的长度。

handleSizeChange(val) {
      console.log(`每页 ${val} 条`); //当前页条数
      this.sizes = val;
      this.handleCurrentChange(1);
    },
handleCurrentChange(val) {
      console.log(`当前页: ${val}`); //当前页码
      //根据当前页码去截取全数组中的部分数组并赋值给一个新数组
      //if 1;length 1-10   index 0-9
      //if 2;length 11-20  index 10-19
      //slice(start,end)
      //this.tableList = this.lists.slice(val * 10 - 10, val * 10);

      this.currentPage = val;
      var size = this.sizes;
      console.log(size); //当前页码
      this.tableList = this.lists.slice(val * size - size, val * size);
    },

4.页面加载的时候默认设置每页展示10条，在created生命周期中分割数组并赋值。

created() {
    this.tableList = this.lists.slice(0, this.sizes);
  },

5.效果图：