element-ui 表格使用多选如何回显打勾

项目需求: 选择表格中的数据点击按钮出现弹框,弹框中显示表格上所选中的数据.

点击弹框中的删除,该行数据删除,对应的表格上也要取消掉勾选.

表格渲染代码

  <el-tableheight="600"ref="myTable"v-loading="crud.loading":header-cell-style="{ color: '#FFF', background: '#333' }":cell-style="{ color: '#FFF', background: '#333' }":data="crud.data"style="width: 100%"@selection-change="crud.selectionChangeHandler":default-sort="{ prop: 'posName', order: '' }"@sort-change="sortChange"><template slot="empty"><span style="color: #969799">{{ $t("NeoLight.empty") }}</span></template><el-table-column type="selection" width="55" />

表格中select事件：当用户手动勾选数据行的Chenckbox时触发的事件,有两个参数selection,row

回显需要的方法

勾选使用方法：toggleRowSelection(row,selected)，toggleRowSelection的第一个参数是选中的行数，第二个参数是否选中，true代表选中，false代表未选中。调用toggleRowSelection这个方法，需要获取真实dom 所以需要注册 ref 来引用它

清除勾选方法：clearSelection(),清除勾选的行数，需要获取真实dom 所以需要注册 ref 来引用它

this.nextTick()方法:Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。nextTick()方法:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。nextTick()方法:Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，使页面渲染和获取的数据保持一致。

回显逻辑代码:

// 关闭弹窗close() {this.detailVisible = false;console.log(this.workOutData, "拿到删除后的值");// this.crud.selections = this.workOutData;this.$nextTick(() => {this.$refs.myTable.clearSelection(); //清除上一次的回显，不然修改后提交显示的页面和数据不一致this.workOutData.forEach((j, i) => {this.crud.data.forEach((v, i) => {if (j.partNumber === v.partNumber) {console.log(v, "选中的值");this.$refs.myTable.toggleRowSelection(v, true);}});});});},