el-table 分页勾选商品组件

 <div class="prods-select-body">
      <el-table
        ref="prodTable"
        :data="dataList"
        :header-cell-style="{height: '42px', background: '#F6F7FA', color:'#666666','font-weight': '500'}"
        :cell-style="{height: '64px', padding: '8px 0', color:'#000'}"
        v-loading="dataListLoading"
        :row-key="getRowKeys"
        @select-all="tableSelect"
        @select="tableSelect"
        style="width: 100%"
        height="420"
      >
    </el-table>
 </div> 
 
 // 多选点击事件
   tableSelect(selection){
      //在当前页面的列表找出未选中的数据
      let uncheckDataList = [], checkDataList = [];
      if(selection.length < 1){
        uncheckDataList = this.dataList;
      }else{
        uncheckDataList = this.dataList.filter(v=>{
          return selection.some(e => e.prodId != v.prodId);
        })
        //在当前页面的列表找出选中的数据
        checkDataList = this.dataList.filter(v=>{
          return selection.some(e => e.prodId == v.prodId);
        })
      }
      //在所有商品列表去掉当前列表未选中的数据
      if(uncheckDataList.length){
        let newArr = [];
        newArr = this.selectProds.filter((item) => {
          return uncheckDataList.findIndex(e=> e.prodId == item.prodId) < 0
        });
        this.selectProds = JSON.parse(JSON.stringify(newArr));
      }
      
      

      //在所有商品列表添加当前列表选中的数据
      if(checkDataList)
      this.selectProds = this.selectProds.concat(checkDataList)

      //去重
      let map = new Map();
      for (let item of this.selectProds) {
          map.set(item.prodId, item);
      }
      this.selectProds = [...map.values()];
    },