项目需求: 选择表格中的数据 点击按钮 出现弹框,弹框中显示表格上所选中的数据.
点击弹框中的删除,该行数据删除,对应的表格上也要取消掉勾选.
表格渲染代码
<el-table
height="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.
n
e
x
t
T
i
c
k
(
)
方
法
:
V
u
e
实
现
响
应
式
并
不
是
数
据
发
生
变
化
之
后
D
O
M
立
即
变
化
，
而
是
按
一
定
的
策
略
进
行
D
O
M
的
更
新
。
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);
}
});
});
});
},
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79318.html
