Element-UI表格多选框与tags联动

项目需求是一个可选择的table表格，勾选上后显示标签，并且翻页也能存留数据

首先是如何将勾选的数据保留，使其翻页或者刷新不改变勾选内容
1、给表格添加row-key
row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

<el-table v-loading="tableDataLoading" :data="tableData" :height="300" :row-key="getRowKeys" @selection-change="handleSelectionChange" ref="multipleTable">
 
      </el-table>

data() {
    return {
      selectTotal: 0,
      title: '添加人员',
      addData: {
        keyWord: '',
        projectUserRole: ''
      },
      // 获取row的key值
      getRowKeys(row) {
        return row.userId;
      	},
      }
      注意：key取独一无二的值，否则会引起混乱

2、在selection行添加:reserve-selection=“true”
reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

       <el-table-column type="selection" width="55" :reserve-selection="true" />
        <el-table-column prop="userName" label="姓名" width="100" align="center" :show-overflow-tooltip="true" />
        <el-table-column prop="employeeNo" label="员工编号" width="160" align="center" :show-overflow-tooltip="true" />

至此，能实现翻页或更新保留历史勾选。

添加tag标签

给tag绑定close事件，此时能实现tag关闭

   <el-tag v-for="tag in userIdList" :key="tag.userId" @close="handleClose(tag)" closable class="tags">
        {{tag.userName}}
      </el-tag>

    // 关闭标签
    handleClose(tag) {
      this.userIdList.splice(this.userIdList.indexOf(tag), 1)
    },

此时tag能关闭标签，但无法与表格的勾选项相关联。
element-ui内置清除勾选的方法（注意给表格绑定ref）

      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

将tag的close方法与table的清除勾选方法相结合

    // 关闭标签
    handleClose(tag) {
      this.userIdList.splice(this.userIdList.indexOf(tag), 1)
      this.$refs.multipleTable.toggleRowSelection(tag);
    },

实现功能！
记录一下。