elementui的el-tree多选树(复选框)⽗⼦节点关联不关联的问题
属性check-strictly
官⽅⽂档提供属性check-strictly,在显⽰复选框的情况下,是否严格的遵循⽗⼦不互相关联的做法,默认为 fal。
⽽此属性的意思是:
默认fal,⽗⼦关联。有如下现象及问题:
1、当你通过函数设置勾选节点的时候,只要⽗节点被勾选⼦节点必会勾选上,即便设置勾选的list中⽆此⼦节点。
2、当你点击勾选复选框时候,若点击⽗节点,其下⼦节点全部统⼀跟随⽗节点变化;若点击⼦节点,⼦节点部分勾选时⽗节点处于半选状态,⼦节点全部勾选时⽗节点选中,⼦节点全部不勾选时⽗节点未选中。
3、需要注意的是,若⽗节点处于半选状态,getCheckedKeys()⽅法接收参数⽆论是true还是fal,都是获取不到⽗节点的。
设置true,严格的遵循⽗⼦不互相关联。
genos
1、当你通过函数设置勾选节点的时候,严格通过设置勾选的list中有⽆此节点来断定是否勾选。
2、当你点击勾选复选框时候,⽆论点击的哪个节点只会改变当前节点的勾选状态,不存在半选状态。
系统的⾓⾊菜单控制的问题星期五的英语单词
问题来了,在系统的⾓⾊菜单控制的时候,需要满⾜以下条件:
1、当通过函数设置勾选节点的时候,需要严格通过设置勾选的list中有⽆此节点来断定是否勾选,即勾选⽗节点⽽不⼀定勾选全部⼦节点。
不离不弃的意思2、当点击勾选复选框时候,若点击⽗节点,其下⼦节点全部统⼀跟随⽗节点变化。
3、当点击勾选复选框时候,若点击⼦节点,⼦节点部分勾选时⽗节点处于半选状态,⼦节点全部勾选时⽗节点选中,⼦节点全部不勾选时⽗节点未选中。
需求思考:
地点的英文
⼀、check-strictly=fal,⾏不通
按照需要满⾜的条件,明显靠近将check-strictly设置为fal,于是从check-strictly=fal⽗⼦互相关联的基础⼊⼿,需要解决的问题就是:
将尚未全部勾选的⼦节点对应的⽗节点改为半勾选状态,但是查找⽂档良久⽆果。
只有getHalfCheckedKeys和getHalfCheckedNodes,并没有设置成半勾选。
⼆、check-strictly=true,试⼀试
只能试⼀下将check-strictly设置为true,从check-strictly=true严格的遵循⽗⼦不互相关联⼊⼿,需要解决的问题就是:
1、当点击勾选复选框时候,若点击⽗节点,其下⼦节点全部统⼀跟随⽗节点变化。
2、当点击勾选复选框时候,若点击⼦节点,⼦节点部分勾选时⽗节点处于半选状态,⼦节点全部勾选时⽗节点选中,⼦节点全部不勾选时⽗节点未选中。
⽽在严格的⽗⼦不互相关联时,点击⽗⼦节点不会出现半选状态,也⽆法通过函数设置半选状态,⽆奈简化解决问题:
believe意思
搞笑外国名字1、当点击勾选复选框时候,若状态为 选中 :
1.1、其所有 ⽗节点 (⽗节点、⽗节点的⽗节点以此类推)全部统⼀跟随当前节点变化为 选中 。
1.2、其下 ⼦节点 全部统⼀跟随⽗节点变化为 选中 。
2、当点击勾选复选框时候,若状态为 未选中 ,其下 ⼦节点 全部统⼀跟随⽗节点变化为 未选中 。
解决代码:
1、el-tree标签属性
<el-tree ref="tree" :data="treeMenus" :props="multiProps" :show-checkbox="true"
node-key="menuId" highlight-current :expand-on-click-node="fal"
:default-checked-keys="checkedId" :check-strictly="true" @check="clickDeal">
node-key:每个树节点⽤来作为唯⼀标识的属性,整棵树应该是唯⼀的。标识节点唯⼀的键值名称。default-checked-keys = checkedId:对应el-tree多选树组件初始化时默认选中ID
check-strictly = true:是否严格的遵循⽗⼦不互相关联的做法
check:当复选框被点击的时候触发的⽅法
props:配置选项,具体看下图。
⽽根据后台的返回,针对:props=“multiProps”,我的配置为:
婚前恐惧症的表现multiProps: {
children: 'childs',英语四六级准考证打印入口官网
label: 'name',
disabled: this.isDisabled
}
识别childs字段为⼦节点name为节点名称,⽽默认是识别children为⼦节点label为节点名称。2、el-tree组件有变化时给多选树重新赋值
updated () {
// 给多选树设置默认值
this.$CheckedKeys(this.checkedId)
},
checkedId为勾选节点的数组,不区分⽗⼦节点。
3、复选框点击时的特殊处理
clickDeal (currentObj, treeStatus) {
/
/ ⽤于:⽗⼦节点严格互不关联时,⽗节点勾选变化时通知⼦节点同步变化,实现单向关联。 let lected = treeStatus.checkedKeys.uId) // -1未选中
// 选中
if (lected !== -1) {
// ⼦节点只要被选中⽗节点就被选中
this.lectedParent(currentObj)
// 统⼀处理⼦节点为相同的勾选状态
this.uniteChildSame(currentObj, true)
} el {
// 未选中处理⼦节点全部未选中
if (currentObj.childs.length !== 0) {
this.uniteChildSame(currentObj, fal)
}
}
},
// 统⼀处理⼦节点为相同的勾选状态
uniteChildSame (treeList, isSelected) {
this.$uId, isSelected)
for (let i = 0; i < treeList.childs.length; i++) {
this.uniteChildSame(treeList.childs[i], isSelected)轻灵
}
},
// 统⼀处理⽗节点为选中
lectedParent (currentObj) {
let currentNode = this.$Node(currentObj)
if (currentNode.parent.key !== undefined) {
this.$Checked(currentNode.parent, true)
this.lectedParent(currentNode.parent)
chow chow
}
},