最近维护Vue老项目，发现使用element-ui表格组件实现穿梭功能，遇到了一些坑

场景 选中左侧表格复选框，右侧展示选中数据、右侧删除左侧复选框跟着联动

 <el-table row-key="id" border @selection-change="selectionOnChange" @select-all="selectAll" :data="tableData" ref="trainingMaterialTable" size="mini" highlight-row height="450">
    <el-table-column :reserve-selection="true" type="selection" width="55"></el-table-column>
` `</el-table>

根据选中事件拿到数组就可以在右侧展示，这个是比较简单的，但是删除的时候根据element-ui提供的方法操作复选框选中联动，但是不起作用。

后来发现每次操作的时候都会向已选中数据添加新值，这样就比较简单了，我们可以通过ref直接获取到那个数组，去直接删除，就解决了这个问题。

 this.$refs.trainingMaterialTable.selection.splice(index, 1)

编辑回显复选框的内容直接使用提供的方法赋值就可以

 this.$nextTick(() => {
        this.existData.forEach(row => {
            this.$refs.trainingMaterialTable.toggleRowSelection(row);
        });
 })