el-table的后端排序以及，用Checkbox的选择多行数据

效果图

 html代码

<div>
    <el-table :data="tableList" @select="selectChangeFunc" @sort-change="sortChange" @select-all="selectChangeFunc">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column prop="startdate" label="开始日期" sortable="custom"></el-table-column>
      <el-table-column prop="enddate" label="结束日期" sortable="custom"></el-table-column>
    </el-table>
    <el-pagination :page-sizes="[2, 5]" :page-size="searchdata.pagesize" :current-page="searchdata.pageindex" :total="total"
      layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  </div>

js代码

data() {
    return {
      //多选时的数据
      selectedDetail: {
        pageDetail: {
          1: {   //1代表当先选择页数
            checkedNum: 0, // 当前页所选总数
            selectedId: [], //当前页所选数据id
          },
        },
        // 已确定的总数
        checkedSelectedNum: 0,
      },
      searchdata: {
        pagesize: 2,
        pageindex: 1,
        orderitem: '', //排序字段
        ordertype: '', //排序类型
      },//页码，页长
      total: 0,//总数据长度
      tableList: [] 
    }
  },
  created() {
    this.getHrmContractList()
  },
  methods: {
    // 多选时向selectedDetail.pageDetail添加数据
    selectChangeFunc(val) {
      this.$set(this.selectedDetail.pageDetail, this.searchdata.pageindex, {
        checkedNum: val.length,
        selectedId: val.map((item) => {
          return item.id
        }),
      })
      this.setCheckedNum()
    },

    //计算selectedDetail.checkedSelectedNum总共多选的个数
    setCheckedNum() {
      const pageArr = Object.keys(this.selectedDetail.pageDetail)
      let sum = 0
      pageArr.forEach((index) => {
        sum += this.selectedDetail.pageDetail[index].checkedNum
      })
      this.selectedDetail.checkedSelectedNum = sum
      console.log(this.selectedDetail)
    },

    //排序
    sortChange(column) {
      this.searchdata.orderitem = column.prop //排序字段
      this.searchdata.ordertype = column.order === 'descending' ? 'desc' : 'asc' //排序类型
      this.searchdata.pageindex = 1
      this.getHrmContractList()
    },

    //获取列表
    getHrmContractList() {
      setTimeout(() => {
        console.log(this.searchdata)
        //请求列表接口
        ......
      }, 100);
    },
    handleSizeChange(val) {
      this.searchdata.pagesize = val;
      this.getHrmContractList();
    },
    handleCurrentChange(val) {
      this.searchdata.pageindex = val;
      this.getHrmContractList();
    },
  },

sortChange方法的column参数： 

 排序时，向表格数据接口发送的参数：

 

假设接口返回数据为，tableList: [{ id: 1, startdate: 20220101, enddate: 20220202 }, { id: 2, startdate: 20220313, enddate: 20220414 }, { id: 3, startdate: 20220525, enddate: 20220626 }]，分两页，第一页两条，第二页一条，

第一页和第二页各选择一条数据时的selectedDetail：