工作中在使用Avue这款ui框架时,一些使用场景需要在重新请求数据后,将上一次勾选中的表格行默认选上
例如:此时勾选中了 “测试任务1” 那么需要在重新请求数据后,重新请求的数据中若有“测试任务1” ,就需要进行回显,也就是默认将其选中。
大致的思路如下:
1、通过节点拿到crud的 toggleRowSelection函数,通过该函数来设置默认选中
代码如下:
//说明:
1、ongoingTask是为crud组件设置的ref属性值
2、listData就是crud渲染的数据 selectList是先前勾选中的数据
3、我这里对listData做的监听 其实也可以直接在网络请求回调里面对listData赋值的地方进行如下操作
watch: {
listData: {
handler() {
//方式一:
let arr = [];
this.listData.forEach(item => {
this.selectList.forEach(info => {
if (info.id == item.id) {
arr.push(item)
}
})
})
this.$nextTick(() => {
arr.forEach(item => {
this.$refs.ongoingTask.toggleRowSelection(item, true);
})
})
//方式二(方式二失败 原因见下面说明)
this.$nextTick(() => {
this.listData.forEach(item => {
this.selectList.forEach(info=>{
if (info.id == item.id) {
this.$refs.ongoingTask.toggleRowSelection(item, true);
}
})
})
})
},
deep: true
}
}
上面的方式二是我最开始尝试的方法,在这上面有一个坑,挂出来让大家都了解一下,避免踩坑。
我在做的时候发现调用toggleRowSelection这个方法,会默认触发crud的 @selection-change方法,也是就是crud的表格勾选的回调,就会执行我下面这段代码
selectionChange(select) {
debugger
this.selectList = select
},
如果使用方法二,那么就会存在一个问题,就会出现selectionChange回调函数被选中的为空的情况,即参数select为空的情况。那么此时他就重置了data中的selectList 数据,此时selectList为空数组,所以就会出现被选中数据丢失的情况
而使用方法一,已经把先前被选中的数据进行了筛选了出来,再调用toggleRowSelection方法即使触发了@selection-change方法那么他被选中,即select参数一直都会有数据,不会出现空的情况,所以就不会对data中的selectList 数据重置。
由于Avue是基于element ui再次封装的 上面介绍的方法在element ui中的table组件同样适用。