element ui组件的表格分页功能

element ui组件的表格分页功能

一. 本地

1.在el-table添加

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

2.在el-pagination添加

<el-pagination
            layout=" total,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;
    }, //点击改变其他页数据

二. 调接口

1.在el-table添加

        <el-table
          :data="tableData"
          v-loading="loading"
        >

2.在el-pagination添加

           <el-pagination
            layout="total, prev, pager, next, sizes, jumper"
            :page-sizes="[5, 10, 20, 30, 40, 50]"
            :page-size="paramsQuery.pageSize"
            :total="total"
            :pager-count="5"
            :current-page="paramsQuery.pageNum"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >

3.data添加

  data () {
    return {
      tableData:[],//请求的数据
      loading:false,
      paramsQuery: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  }

4.在methods添加

   //后端接口
   getList(){
		this.loading = true;
		list(this.paramsQuery).then((res)=>{
			this.tableData = res.rows
			this.total = res.total
			this.loading = false;
		})
	},
    handleCurrentChange (val) {
    	this.paramsQuery.pageNum = val
		this.getList()
    }, //点击改变页数和数据
    handleSizeChange (val) {
      this.paramsQuery.pageSize = val
      this.getList()
    }, //点击改变其他页数据