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

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

当前政策页面

中指数据页面

我遇到的问题就是 如果在当前政策这里删除了,那么中指数据那里怎么取消勾选?
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数组几种常见的操作方法攻略.