[JavaScript知识库]element ui组件的表格分页功能

element ui组件的表格分页功能

1.在el-table添加

        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
        >

2.在el-pagination添加

          <el-pagination
            layout="  prev, pager, next, sizes, jumper"
            :page-sizes="[5, 10]"
            :page-size="pagesize"
            :total="tableData.length"
            :pager-count="5"
            :current-page="currentPage"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >

3.data添加

  data () {
    return {
      tableData:[{'你的数据'}],
      currentPage: 1, //展示第几页
      pagesize: 5, //每页的数据条数
    }
  }

4.在methods添加

    handleCurrentChange (val) {
      this.currentPage = val;
    }, //点击改变页数和数据
    handleSizeChange (val) {
      this.pagesize = val;
    }, //点击改变其他页数据