需求： 添加 table 列表选中的数据传给后台， 编辑 回显后台需要勾选的id数据，进行编辑之后更新id 数组，传给后台。

结构体 el-table

先来解释table中的属性：

data:table的数据

ref:回显勾选需要获取到每一列标识，

row-key：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。（直接拿的element的解释），

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

row-key和reserve-selection 两个要结合起来，很重要的，他可以让你在选择分页的时候原来选中的数据或者取消勾选的数据，在页面不刷新的情况下，一直保持勾选或不勾选的状态。

selection-change：多选时会触发，选中 返回的是选择的数据，取消 返回的是选择的数据 （有点废话啦哈哈哈，但是我还是要写）

select 单选时会触发， 取消和勾选 返回的都是那一列的数据

需要用到的自定义数组

每次分页回显勾选的方法

这里面要提一嘴的是 nextTick 很重要，由于Vue的数据响应式特性，当我们修改Vue实例中的数据时，Vue会异步地更新DOM，而不是立即更新。这意味着在修改数据后立即访问DOM可能无法获取到最新的更新结果。这时，我们可以使用nextTick方法来确保在DOM更新完成后执行回调函数。

多选时需要筛选和处理的数据

else 里面：

this.selectArr_Id = rows 选中的所有数据

if (rows) {
       rows.forEach((row) => {
          if (row) {
              this.select_Id.push(row.id);
          }
    });
}

this.select_Id 将所有的选中id 拿出来存储到数组中，

this.select_Id = [...new Set(this.select_Id)] 数组去重

if 里面：

this.select_IdValueTwo = this.select_IdValueTwo.filter(item => !this.select_Id.includes(item)); 将需要回显，并且已经回显的数据过滤掉，不然在分页的时候取消的会自动再勾选回来。

this.select_Id = this.select_Id.filter(id => !this.selectArr_Id.some(obj => obj.id === id)); 拿到取消的数据，在this.select_Id数据中将他筛选出去，在重新赋值

单选是需要筛选和处理的数据

else 里面

this.cancelId 将单选选中的数据添加到 this.cancelId 数据中

if 里面

this.select_IdValueTwo = this.select_IdValueTwo.filter(value => value !== itemValue.id); 将需要回显，并且已经回显的数据过滤掉，不然在分页的时候取消的会自动再勾选回来。

this.cancelId = this.cancelId.filter(value => value !== itemValue.id); 将取从this.cancelId 里面里面筛选出去

this.select_Id = this.select_Id.filter(value => value !== itemValue.id); 已经回显出来的，需要取消选中的，进行筛选掉。

const data = [...new Set([...this.select_IdValueTwo, ...this.select_Id, ...this.cancelId])] 最后就是拿到 全选的按钮数据this.select_Id ,单选的按钮数据 this.cancelId, 编辑时需要回显的数据this.select_IdValueTwo。