element-uiel-tree选择⼦节点时同时选择并提交⽗节点逻辑问
题
el-tree组件在获取选择的节点时,默认的逻辑是,选中⽗节点时所有的⼦节点会被选中(checked),但是当该节点下不是选中所有⼦节点的时候,主节点不会被选中,⽽是处于⼀种半选中状态,提交时通过 getCheckedKeys() ⽅法也不会提交⽗节点,因为半选中状态下checked 属性是 fal 的。
项⽬中通常会有这样的需求
解决办法
通常如果只是为了提交数据,我们可以使⽤getHalfCheckedKeys()+getCheckedKeys()来获取需要的数据
const data=[
...this.$HalfCheckedKeys(),
...this.$CheckedKeys()
]
羊肉面图片
但是如果需要保存数据且需要编辑,那在编辑初始设置选中项的时候将遇到问题,所以我们只能使⽤el-tree现有的api来⾃⼰实现需要的功能,el-tree中有⼀个属性check-strictly(在显⽰复选框的情况下,是否严格的遵循⽗⼦不互相关联的做法,默认为 fal)意思就是勾选⽗节点和勾选⼦节点,没有任何的关系。这是为了解决默认选中节点加载时,选中⽗节点会同时选中所以⼦节点,显然这不是我们想要的。
<el-tree
show-checkbox
node-key="id"
浪漫诗句
check-strictly
@check-change="checkChange"
ref="tree">
</el-tree>
少年正是读书时
然后使⽤ check-change 事件(节点选中状态发⽣变化时的回调)
共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本⾝是否被选中、节点的⼦树中是否有被选中的节点
checkChange(data, check) {
南瓜怎么炒// ⽗节点操作
if (data.parentId !== null) {
if (check === true) {
// 如果选中,设置⽗节点为选中
this.$Checked(data.parentId, true);
民间补肾
} el {
// 如果取消选中,检查⽗节点是否该取消选中(可能仍有⼦节点为选中状态) var parentNode = this.$Node(data.parentId);
var parentHasCheckedChild = fal;
for (
var i = 0, parentChildLen = parentNode.childNodes.length;
i < parentChildLen;
i++
好点子) {
小猴子下山的故事if (parentNode.childNodes[i].checked === true) {
parentHasCheckedChild = true;
break;
}
}
if (!parentHasCheckedChild)
this.$Checked(data.parentId, fal);
}
}
// ⼦节点操作,如果取消选中,取消⼦节点选中
if (data.children != null && check === fal) {
for (var j = 0, len = data.children.length; j < len; j++) {
var childNode = this.$Node(data.children[j].id);
if (childNode.checked === true) {
this.$Checked(childNode.data.id, fal);
}
}
}
倾轧是什么意思
}