VUE element-ui之table表格分页完整功能

步骤：

表格底部导入分页组件：

 <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[100, 200, 300, 400]"
          background
          layout="prev, pager, next, total, jumper"
          :total="totalData"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />

定义组件内变量：

data() {
    return {
      tableData: [],
      totalData: null,//总条数
      currentPage: 1,//当前页码
      pageSize: 50,//每页条数
    }
  },

methods中定义方法：

 handleCurrentChange(val) { //分页
      this.params.page = val - 1//这里注意：后端页码从0开始所以用当前页码-1，否则前端页码会多一页
      frequencyTen({ ...this.params }).then(res => {
        this.tableData = res.frequency.content
        this.totalData = res.frequency.totalElements
      })
    }

效果如图：

// 可选择页条数
    handleSizeChange(val) {
      this.params.size = val
      driverScoreTab(this.params).then(res => {
        this.totalData = res.totalElements
        this.tableData = res.content
      })
    },

效果图：