element-ui表格多选，下方显示选中的数据

功能：表格多选时，下方需要显示选中的数据，下方取消选中的同时，表格也要随之取消选中；

1、row-key 绑定当前的id

2、使用this.$refs.dialogTable.toggleRowSelection(item, false);让对应的取消选中

<template>
  <div>
    <el-table
      height="300"
      :data="dialogTable"
      ref="dialogTable"
      :row-key="(row) => row.id"
      @selection-change="handleSelectionChangePop"
    >
      <el-table-column type="selection" width="55" />
    </el-table>

    <el-checkbox-group
      v-model="checkbox_group"
      v-for="(item, index) in selectionArr"
      :key="index"
      @change="getchegkbox"
    >
      <el-checkbox :label="item.id" name="type">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectionArr: [],
      checkbox_group: [],
    };
  },
  methods: {
    handleSelectionChangePop(val) {
      // 获取选中的数据
      this.selectionArr = val.map((item) => {
        return item;
      });
      // 让 el-checkbox 默认选中
      this.checkbox_group = this.selectionArr.map((item) => {
        return item.id;
      });
    },
    getchegkbox(e) {
      // 获取取消选中的 id
      const uncheckedItems = this.selectionArr.filter(
        (item) => !e.includes(item.id)
      );
      // 对取消选中的 id 执行其他操作
      for (const item of uncheckedItems) {
        this.$refs.dialogTable.toggleRowSelection(item, false);
      }
    },
  },
};
</script>

<style></style>