个人觉得el-tree这种设计原理不太友好,因为做递归去处理这种属性结构的数据是很难受的~~~,一般情况下是只要有子级选中那么父级就选中,子级全不选中则父就不选中。而el-tree设计是只有子级全选中时父级才选中,子级未全选时父级为半选(此时其实为未选中),当子级全不选时父级为不选中。 3.解决方案: 好了,...
data:()=>({isCheckAll:false,// 是否全选pickStatus:1,// 0 空,1 半选,treeLens:0,// el-tree 深度dataList:[],// 要渲染的成el-tree的数组isFirstPickAll:true,// 是不是第一次点击全选的defaultProps:{// 渲染el-tree属性参数children:'children',label:(data,node)=>data,},}); ...
方法跟之前一样,把半选的节点的ID和勾选的节点的ID组合到一起提交就可以了 constparentArr=_this..tree.getHalfCheckedKeys()constchildeArr=_thisgetCheckedKeys()constarr=childeArr.concat(parentArr)
由于tree的数据量大,一次返回的数据量会很慢,所以采用了懒加载lazy来实现。 在实现el-tree 的懒加载时,从数据已知是否选中状态以及半选节点list。 由于tree数据是点击一级加载一级,会存在用户修改复选框状态后,再去加载子集数据的情况,这需要以父节点的选中状态为准:
// el-tree 复选框默认选中事件 handleSelectionChange(val) { // this.multipleSelection 这个数组用来存储所有半选的节点和全选的节点 用于保存的时候将数据传给后台 // 将半选和全选的节点全都存储在一个数组里面 concat 方法是合并(全选和半选)两个数组 ...
1:父组件勾选(全选),所有子节点全选 2:子节点不全选,父组件半选 3:子节点全不选,父组件不可选 4:树组件设置check-strictly=true,取消父子节点的勾选关联(没有半选状态) 如果要实现子组件全不选,父节点半选 <template> <el-tree ref="tree" class=...
我们在获取Element tree的选中的节点的时候一般都是通过 this.$refs.tree.getCheckedNodes() 1. 这个来获取选中节点的,但是他是无法获取到半选中状态的节点的,这个时候,Element提供了另一个方法 this.$refs.tree.getHalfCheckedNodes() 1. 这个方法是用来获取所有半选中状态的节点的。
// el-tree 复选框默认选中事件 handleSelectionChange(val) { // this.multipleSelection 这个数组⽤来存储所有半选的节点和全选的节点⽤于保存的时候将数据传给后台 // 将半选和全选的节点全都存储在⼀个数组⾥⾯ concat ⽅法是合并(全选和半选)两个数组 this.multipleSelection = this.$refs....
el-tree 组件在获取选择的节点时，默认的逻辑是，选中父节点时所有的子节点会被选中（ checked ），但是当该节点下不是选中所有子节点的时候，主节点不会被选中，而是处于一种半选中状态，提交时通过 getCheckedKeys() 方法也不会提交父节点，因为半选中状态下 checked 属性是 false 的。解决...