vue项目 element-ui中，table多选，影响右侧列表的数据，右侧删除某一条数据，table实时改变选中状态

效果图说明

简化了其他干扰项（比如：样式什么的），只讲最核心的需求。

效果视频

vue项目 element-ui中，table多选，影响右侧

明确需求

左侧table

1. 左侧table勾选某一条数据，右侧列表数据新增一条。
2. 左侧table取消勾选某一条数据，右侧列表数据删除相应的数据。
3. 左侧table分页切换，勾选状态保持不变

右侧列表数据
4. 点击某条数据的删除按钮，列表删除该条数据，table中该条数据取消勾选。

简单的代码示例

html代码

<template>
  <div class="wrap">
    <div class="table">
      <el-table
        :row-key="getRowKey"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55"
        />
        <el-table-column prop="id" label="id" width="50" />
        <el-table-column prop="title" label="标题" width="350" />
      </el-table>
      <el-pagination
        class="page"
        :page-size="3"
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
      />
    </div>
    <ul>
      <li v-for="item in multipleSelection" :key="item.id" @click="del(item)">
        <span>{{ item.id }}---</span>
        <span>{{ item.title }}</span>
        <span class="del">删除</span>
      </li>
    </ul>
  </div>
</template>

javascript代码

前期准备：

1.绑定id， :row-key=“getRowKey”
2. 解决分页状态缓存使用， :reserve-selection=“true”
3. 监听table变化的数据，使用@selection-change=“handleSelectionChange”
4. 修改table的勾选状态， this.$refs.multipleTable.toggleRowSelection(row, true);

代码思路：

1. 调用接口，获取table数据
2. 勾选和取消勾选， 使用@selection-change=“handleSelectionChange”，拿到变化的数据，赋值给multipleSelection，右侧使用v-for循环显示
3. 点击删除按钮，执行del方法
   3.1 找到删除的对象数据
   3.2 取消选中表格行 this.$refs.multipleTable.toggleRowSelection(selectedRow, false)
   3.3 删除右侧的数据
4. 涉及，删除非当前页数据，（比如： 切换到第二页，删除第一页的数据）需要恢复之前分页的选中状态
   4.1 请求后端数据后，对选中状态进行初始化。
   与之前的已选中数据就行对比，调用this.$refs.multipleTable.toggleRowSelection(selectedRow, 是否选中)方法，之前选中的是true,未选中是false。

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      tableData: [],
      multipleSelection: [], // 右侧显示的选中列表
      page: 1,
      total: 0,
    };
  },
  created() {
    this.get_data();
  },
  methods: {
    // 获取数据
    async get_data() {
      const params = {
        keyword: "",
        field: "",
        page: this.page,
        page_size: 3,
      };
      const {
        data: {
          data: { data, total },
        },
      } = await axios.get("video/video_list", { params });
      this.tableData = data;
      this.total = total;

      // 在切换分页后，恢复表格的选中状态
      this.$nextTick(() => {
        this.restoreSelection();
      });
    },

    // 恢复当前分页的选中状态
    restoreSelection() {
      this.tableData.forEach((row) => {
        if (this.multipleSelection.some((item) => item.id === row.id)) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        } else {
          this.$refs.multipleTable.toggleRowSelection(row, false);
        }
      });
    },
    // 删除右侧选中列表中的项，并取消表格中的选中状态
    del(row) {
      // 找到该行的数据
      const selectedRow = this.tableData.find((item) => item.id === row.id);

      if (selectedRow) {
        // 取消选中表格行
        this.$refs.multipleTable.toggleRowSelection(selectedRow, false);
      }

      // 从 multipleSelection 中移除
      this.multipleSelection = this.multipleSelection.filter(
        (item) => item.id !== row.id
      );
    },

    // 切换分页事件
    handleCurrentChange(val) {
      this.page = val;
      this.get_data();
    },

    // 当 table 选择项发生变化时触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 获取每行的唯一 key
    getRowKey(row) {
      return row.id;
    },
  },
};
</script>

css代码

<style scoped>
.wrap {
  padding: 30px;
  display: flex;
  justify-content: flex-start;
}
.table {
  margin-right: 20px;
  width: 200px !important;
}
.page {
  margin-top: 30px;
}
.del {
  margin-left: 30px;
  color: red;
  cursor: pointer;
}
</style>

满足好奇心，这个需求坑比较多，我已经被好几个地方坑了。

提示：

1. 如果右侧的数据字段名称需要重命名，在删除的时候，注意table是否能识别到改变。
2. 分页请求后端数据时，一定要恢复table之前的状态。

遇到的问题

1. 特别是分页时，右侧删除数据，左侧勾选状态未取消。
2. 右侧删除数据，报错key重复。