el-table表格实现分页记录上一次的选择，回显默认值选择

约定不等于承诺〃 2022-10-16 01:55 417阅读 0赞

1.  **背景：**  
    最近项目做一个弹窗，里面涉及表格的选择，因为有表格出现分页，所以需要记住上一页的选择，当有默认值的时候，再次打开弹窗需要复现选择。
2.  **难点：**  
    当用户选择操作后，点击取消关闭弹窗，此时再次打开没有清空上一次弹窗的选择；当采用el-table自带的this.$refs.multipleTable.clearSelection()去清空上一次弹窗的选择时，会清空已选中存在的值。
3.  **解决方案：**  
    （1） **首先el-table如何实现表格多选?**

<el-table
          :data="listData"
          @selection-change="handleSelectionChange"
          border
          show-overflow-tooltip
          :row-key="getRowKeys" // 必定义复选框的唯一key值，这样才会记录上一次的选择
          size="mini"
          max-height="350px"
          ref="multipleTable"
        >
          <el-table-column
            :selectable="getSelectable"
            :reserve-selection="true"
            fixed
            type="selection" // 必申明类型
            align="center"
          />
          <el-table-column prop="component_name" label="组件名称" />
          <el-table-column prop="component_id" label="组件ID" />
     </el-table>

data() { 
    	return { 
    		getRowKeys(row) { 
            return row.component_id;
          }
    	}
    }

（2） **如何解决清空上一次弹窗的选中值，点击取消弹窗后？**  
我是在打开弹窗的时候采用watch监听，因为此时发现this.$refs.multipleTable.clearSelection()是异步的操作，所以需要先清空，再调接口查询表格数据，和回显默认值

watch() { 
    	visible: { 
          handler: async function (val) { 
            if (val) { 
              await this.$refs?.multipleTable?.clearSelection(); // 先清空上一次弹窗的操作
              if (Object.keys(this.default_data).length > 0) {  // 如果默认值有值
                this.accountModule = this.$utils.deepClone(this.default_data);
              }
              await this.getCreativeList();
              // 如何复选默认值的选中？
              let rows = this.accountModule // 先取到你的默认值
              if (rows.length > 0) { 
                rows.forEach((row) => { 
                  this.$refs.multipleTable.toggleRowSelection(row, true); // 回显已选中的值
                });
              }
            }
          },
        },
    }

（3）**如何复选默认值的选中？**

methods: { 
    	getCreativeList() { 
    		this.$axios
            .get("/xxxx", {  params })
            .then((res) => { 
             // 拿到表格的值
            })
    	},
    	/** * 表格单行返回是否可以勾选 */
        getSelectable(row) { 
          return row.status !== "REJECT";
        },
    }