其实就像普通的复选框,双向绑定的 checkbox,点击就是选中状态。 不过为了还要显示出半选状态,所以要依赖属性indeterminate。当indeterminate的值为true,即半选状态。 用于全选的处理函数 /** * 全选 el-tree 节点 */pickAll(){this.pickStatus=0// 先设置为空状态(为的就是 indeterminate 这个属性为false,才能为...
个人觉得el-tree这种设计原理不太友好,因为做递归去处理这种属性结构的数据是很难受的~~~,一般情况下是只要有子级选中那么父级就选中,子级全不选中则父就不选中。而el-tree设计是只有子级全选中时父级才选中,子级未全选时父级为半选(此时其实为未选中),当子级全不选时父级为不选中。 3.解决方案: 好了,...
// el-tree 复选框默认选中事件 handleSelectionChange(val) { // this.multipleSelection 这个数组用来存储所有半选的节点和全选的节点 用于保存的时候将数据传给后台 // 将半选和全选的节点全都存储在一个数组里面 concat 方法是合并(全选和半选)两个数组 this.multipleSelection =this.$refs.treeData.getHalf...
1 console.log("保存树权限数组:"," 勾选项的数组 ",this.$refs.tree.getCheckedKeys(),' 带半勾选项的数组 ',this.$refs.tree.getHalfCheckedNodes().concat(this.$refs.tree.getCheckedNodes())) 回显设置: 1 2 3 for(var i in this.treecheck){ this.$refs.tree.setChecked(this.treecheck[i...
我们在获取Element tree的选中的节点的时候一般都是通过 this.$refs.tree.getCheckedNodes() 1. 这个来获取选中节点的,但是他是无法获取到半选中状态的节点的,这个时候,Element提供了另一个方法 this.$refs.tree.getHalfCheckedNodes() 1. 这个方法是用来获取所有半选中状态的节点的。
4.如果部分子节点被选中,则将父节点设置为半选中状态。 5.如果没有子节点被选中,则将父节点设置为未选中状态。 6.如果父节点的选中状态发生改变,将会触发父节点的选中状态改变事件,并递归更新其父节点的选中状态。 通过上述步骤,实现了复选框根据子节点修改父节点的底层原理。这样可以确保父子节点之间的选中状态保...
el-tree 组件在获取选择的节点时,默认的逻辑是,选中父节点时所有的子节点会被选中( checked ),但是当该节点下不是选中所有子节点的时候,主节点不会被选中,而是处于一种半选中状态,提交时通过 getCheckedKeys() 方法也不会提交父节点,因为半选中状态下 checked 属性是 false 的。解决...
el-tree的一个坑 使用this.$refs.tree.setCheckedKeys([3]) 设置树组件的选中节点,不能传半选状态,不然最后保存的是全选。
首先根据ref获取到要node,获得 node 的 key 或者 data,然后判断是否为叶子节点,如果是叶子节点就setChecked设置选中状态;setChecked(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false ...