vue+element table动态取消勾选和刷新后默认勾选

2024-07-12 01:44| 来源: 网络整理| 查看: 265

现在我们有这样一个需求,有当前政策和中指数据两个tab切换页签,在中指数据页面勾选到的数据要在当前政策这里能够展示,和删除,如果在当前政策这里删除了,那么中指数据那里取消勾选表格我用的是element table type=“selection”

技术: vue + element

当前政策页面在这里插入图片描述

在这里插入图片描述

中指数据页面在这里插入图片描述我遇到的问题就是如果在当前政策这里删除了,那么中指数据那里怎么取消勾选? element 官网上这么说的, 我先开始这用的clearSelection这个方法,想着删除了哪一条就把这一条传过去给删除,岂不是美滋滋,可以这个属性竟然不能够传参,吐血一分钟…,咋办咋办啊?? 天无绝人之路,只能勉强拐着弯用第二个了,但是第一个你也跑不掉,死也要拉上你垫背殉葬方法如下,以限贷为例吧

const aaa = [] // this.middleDefaultData 是右边中指限贷所有选中的数据 // creiPolicyId 是点击的删除当前的这条数据的唯一标识id // pkId 是中指数据的和当前政策的对应id this.middleDefaultData.forEach(y => { if (x.pkId != y.creiPolicyId) { aaa.push(x) } }) // 此时筛选出的 aaa 就是剩下的选中数据

执行完了此方法后重头戏就到了,代码如下

toggleSelection(rows, idx) { if (rows) { //rows就是限贷的表格所有选中的数据list let selected = true // 再次选中之前先把限贷所有的选中全部清空一下 this.$refs.refs.multipleTable.clearSelection() rows.forEach(row => { this.$refs.refs.multipleTable.toggleRowSelection(row, selected) }) //下面我这个方法是升级版的,动态的表格 //refs[`multipleTable${idx}`][0].clearSelection() //rows.forEach(row => { // refs[`multipleTable${idx}`][0].toggleRowSelection(row, selected) //}) } }

赶快去看看效果吧其实还有一个地方需要用到这个,就是勾选过之后,保存数据库了,刷新之后默认勾选,也是这个方法你可以试试看哟如果你现在遇到更复杂的需求,欢迎私信交流沟通实现项目中可能数据结构了,需求大不相同,那时候就需要你随机应变了处理数据请转到: js数组几种常见的操作方法攻略.

【本文地址】

公司简介

联系我们

vue+element table动态取消勾选 和 刷新后默认勾选

vue+element table动态取消勾选和刷新后默认勾选