博客

el-table分页全选功能

今天和大家一起学习一个el-table 分页全选的功能

我们在用el-table组件的时候，肯定会用到分页功能，不管是长列表下拉分页还是用element-UI的el-pagination分页。

但是我们在具有选择功能的el-table的时候，会遇到一个问题，在点击进行分页之后，之前选择的数据没了，这个问题真的是困扰我良久。

在初期我用的办法是，在el-table中，通过

@select=“changeSelect”

和

@selection-change=“handleSelectStockChange”

，这个方法有bug。

changeSelect(selected, row) {  //selected:选中的数据组成的数组，row：最后一次点击的那个数据对象
      this.selectList = row;
      this.isInSelectList = selected.indexOf(row); //判断row在不在selected里面，即row这条数据是否被选中
    },
handleSelectStockChange(val) {   //val的格式[{code:1,name:'小明'},{code:1,name:'小明'}]
      let stockSelectlist = [];
      val.forEach((el) => {
        stockSelectlist.push(el.code);   //获取所有code组成的数组
      });
      this.SelectStock = stockSelectlist;   //将获取的数据保存一下
      this.SelectStock.push(...stockSelectlist);   //分页之后重新选择的数据进行追加
      this.SelectStock = _.uniqWith(this.SelectStock, _.isEqual);   //lodash库里面的去重方法，注意：需要import _ from 'lodash',不需要安装依赖，脚手架自带，可以直接使用
      if (this.isInSelectList == -1) {  // 当这个值为-1时，说明是进行的取消选中的操作，因此将这条数据剔除
      	this.SelectStock = this.SelectStock.filter((el) => {
      		return el != this.selectList.code;
      	});
      }

这个方法可以实现，但是在交互样式上会出现问题，就是再次点击回到之前页时，数据虽然已经被选中了，但是页面上显示的是未选中。

各位大佬们，如估计这个有解决办法，欢迎评论。

在后面的我又开始面向百度开发，找到一个没有bug的方法，是看谁的，我忘了（狗头保命）

这个方法是：

在el-table中，通过

@selection-change=“handleSelectStockChange”

和

:row-key=“getRowKeys”

，

在第一行，也就是多选框的那一列上，加上

:reserve-selection=”true”

// HTML 代码
<el-table
   ref="selectTable"
   :data="resultList"
   v-loading="selectLoading"
   tooltip-effect="dark"
   style="width: 100%"
   @selection-change="handleSelectStockChange"
   :row-key="getRowKeys"
   >
      <el-table-column
         type="selection"
         width="55"
         :reserve-selection="true"
      >
      </el-table-column>
      <el-table-column label="股票名称" prop="name">
         <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column prop="code" label="股票代码">
         <template slot-scope="scope">{{ scope.row.code }}</template>
      </el-table-column>
</el-table>

// js代码，在methods里面
getRowKeys(row) {
    return row.code;
},
handleSelectStockChange(val) {
   let stockSelectlist = [];
   val.forEach((el) => {
      stockSelectlist.push(el.code);
    });
    this.SelectStock = stockSelectlist;
},

最终结果

第一次点击，选中一个



更换搜索条件之后，之前选中的数据依旧选中



这个技术就能完美实现了