The table multi-select box in element is matched with paging, and the bug is echoed.

• Requirement:
  element+table+paging control realizes the echo of the multi-select box
• question
  • The simpler the official website code looks, the worse the actual abuse
  • Official website code

   this.$refs.multipleTable.toggleRowSelection(row);
  

  • However, when the data is passed in the implementation code, the echo of the multi-select box cannot be realized.
  • The function you want to achieve: The selected data can be echoed in the table. Each time you switch paging, you can save the data selected on the previous page
• solve:
  1. :row-key="getRowVoucherKeys" and :reserve-selection="true" are indispensable

 <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
    },

• Be sure to return the unique value here

2. @select="handleSelectionVoucherChange" This event is bound to the table. It should be noted that if the selection-change event is bound to the table, the data of the previous page cannot be obtained during paging.
3. data storage
   • When getting detailed data, assign the data to be echoed to a variable this.voucherObj.echoVoucherSelection
   • When clicking to select or unselect, add or delete the data of 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 saves all the selected data
4. Circumference

  // // 设置选中状态
    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) {
    
    }
      })
    },

Notice

• It has not been easy to write the echo before, because the echo data is assigned to a new variable for incoming
• After modification: To use the original data bound by the table table, it can be echoed after passing in
• Through the find method, let the list (voucherList) in the pop-up box match the data of the selected list (echoVoucherSelection), and then use toggleRowSelection, this time it finally succeeded,
• Every time you click on the paging trigger method, drop the method again to echo the data on the next page

5. Delete the data of echoVoucherSelection and cancel the table echo

  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
      )
    },

Summary: The data of the toggleRowSelection operation is related to the pointer. We can only operate the list of the current list, just like my previous wrong operation. Although the row (val) passed in by toggleRowSelection is exactly the same as the data of a certain item in the selected list, but I pass The incoming row and the row of an item in the popup list point to different addresses