element中table多选框搭配分页，回显bug踩坑

需求：
element+table+分页控件实现多选框的回显
问题
- 官网代码看着越简单，实际被虐的更惨
- 官网代码
```
 this.$refs.multipleTable.toggleRowSelection(row);
```
- 但是实现代码中传入数据的时候却无法实现多选框的回显
- 想要实现的功能:已经选中的数据可以在table中实现回显。每次切换分页时，可以保存上一页选中的数据
解决：
1. :row-key="getRowVoucherKeys"和:reserve-selection="true"缺一不可

 <el-table ref="voucherTable" :data="voucherObj.voucherList" @select="handleSelectionVoucherChange" :row-key="getRowVoucherKeys">
                  <el-table-column type="selection" width="55" align="center" :reserve-selection="true"> </el-table-column>
                </el-table>

  getRowVoucherKeys(row) {
    
    
      //记录每行的key值
      return row.voucherId
    },

这里一定要把唯一值return出去

@select=“handleSelectionVoucherChange” 表格上绑定该事件，需要注意的时，如果表格绑定的时selection-change事件，在分页时，是拿不到上一页数据的

数据的保存

在获取详情数据时，把需要回显的数据赋值给一个变量this.voucherObj.echoVoucherSelection
当点击选中或者取消选中是对this.voucherObj.echoVoucherSelection数据进行增加或者删除

   handleSelectionVoucherChange(list, item) {
      
      
  if (list.includes(item)) {
      
      
    //勾选时做的事
    this.voucherObj.echoVoucherSelection.push({
      
      
      voucherId: list[list.length - 1].id,
      voucherName: list[list.length - 1].voucherName,
      voucherCount: list[list.length - 1].number,
    })
  } else {
      
      
    //取消勾选时做的事，arguments[1]是当前取消勾选的项
    this.voucherObj.echoVoucherSelection = this.voucherObj.echoVoucherSelection.filter((val) => val.voucherId !== arguments[1].id)
  }
},

this.voucherObj.echoVoucherSelection中保存的就是所有选中的数据

回显

  // // 设置选中状态
    toggleVourcherSelection() {
    
    
      this.$refs.voucherTable.clearSelection()
      this.$nextTick(() => {
    
    
        try {
    
    
          this.voucherObj.echoVoucherSelection.forEach((val) => {
    
    
            let echoVoucherSelection = this.voucherObj.voucherList.find(
              // 这是我弹框表格的数据
              (item) => val.voucherId === item.voucherId
            )
            if (echoVoucherSelection) {
    
    
              this.$refs.voucherTable.toggleRowSelection(
                this.voucherObj.voucherList.find(
                  // 这是我弹框表格的数据
                  (item) => val.voucherId === item.voucherId
                ),
                true
              )
            }
          })
        } catch (error) {
    
    }
      })
    },

注意

之前写回显一直不好使，是因为把回显的数据赋值给了一个新的变量进行的传入
修改后：要使用table表格绑定的原始数据，进行传入才能回显
通过find方法，让弹框中的list（voucherList）去匹配已选中list（echoVoucherSelection）的数据，然后使用toggleRowSelection，这一次终于成功了，
每次点分页触发方法时，再掉一遍该方法，使下一页的数据回显

删除echoVoucherSelection的数据，table回显取消

  onCloseVoucherIcon(voucherId) {
    
    
      this.voucherObj.echoVoucherSelection = this.voucherObj.echoVoucherSelection.filter((val) => val.voucherId !== voucherId)
      // 取消删除的选中
      this.$refs.voucherTable.toggleRowSelection(
        this.voucherObj.voucherList.find(
          (item) => item.voucherId === voucherId
        ),
        false
      )
    },

总结：toggleRowSelection操作的数据和指针有关，我们只能操作当前列表的list，就像之前我的错误操作，虽然toggleRowSelection传入的row（val）和选中列表中的某一项数据一模一样，但是我传入的row和弹框列表某一项的row指向不同的地址

element中table多选框搭配分页，回显bug踩坑

猜你喜欢