当前位置: 首页 > Web前端 > vue.js

元素树表懒加载校验问题解决

时间:2023-03-31 14:57:47 vue.js

elementtreetable懒加载check问题解决方案需求说明公司项目有一个elementtreetable来展示数据,现在需要添加一个check功能(level3)问题分析直接使用elemnt的check列,就可以实现第一个level,但是在secondlevel不支持check之后,问题就来了,selectall函数只链接到firstlevel,即使我们用this.$refs.mulTable.store.states.lazyTreeNodeMap给second,thirdlayer用于检查,但是没有半选的能力,所以这里需要以自定义列的形式定义检查列这样我们就可以通过监听子列的check来判断它属于哪一层了(可以在Addlevelmarkersand父级对应标记,方便查找上一级)一级数据在表绑定对象中,二级之后的懒加载数据在表的this.$refs.mulTable.store.states在.lazyTreeNodeMap中,存放在修改对象的row-key对应的key值下,通过this.$refs.mulTable.store.states.lazyTreeNodeMap[row-key]可以得到,比如row-key绑定id,那么通过parentid,this.$refs.mulTable.store.states。lazyTreeNodeMap[parentLevelid]获取下一层对应的数据。如图所示,在自定义列中修改非一级修改时,我们将每一行的checked值双向绑定到变化行的checks属性上,所以我们直接通过更改某行的checks值js可以实现改变勾选状态。每次值变化时,我们都可以根据当前变化的行获取其父节点到第一层,或者根据row-key获取子节点。然后获取相应的数据来改变子节点和父节点的状态。总体实现思路总结如上。按照这个思路就可以实现了。这并不困难,需要一定的思考。既然是项目码,就全额补贴。ps:有什么问题可以评论或者私信问ps:关于元素树表单数据问题的文章,可以看这篇文章https://blog.csdn.net/ta_huang/article/details/124631705