属性check-strictly：在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false。
实现的功能：
1、点击根（父）节点，下面的子节点全部勾选上
2、点击子节点父节点勾选上（嵌套多层父节点自动递归往上查找）
3、已勾选父节点下的子节点全部取消勾选，父节点就取消勾选。
4、如嵌套多层父节点默认递归往上查找，直到找到父级节点下的全部同级子节点不是全取消勾选状态的。
注意事项： 1、方法里的parent不要修改
2、parentId和children根据你自己获取到的参数修改
方法在最下面可以直接翻到底
获取最终选中id值this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())返回数组
<template>
<div>
<el-tree ref="tree"
:data="treeMenus"
:props="multiProps"
:show-checkbox="true"
node-key="id"
highlight-current
:expand-on-click-node="true"
:default-checked-keys="checkedId"
:check-strictly="true"
@check="clickDeal">
</el-tree>
</div>
</template>
return {
checkedId: [],
treeMenus: [{
id: 1,
parentId: -1,
label: '一级 1',
children: [{
id: 4,
parent: 1,
label: '二级 1-1',
children: [{
id: 9,
parentId: 4,
label: '三级 1-1-1',
children: [{
id: 1000,
parentId: 9,
label: '三级 1000-1-1',
children: []
}, {
id: 1001,
parentId: 9,
label: '三级 1001-1-1',
children: [{
id: 2000,
parentId: 1001,
label: '三级 2000-1-1',
children: []
},{
id: 2001,
parentId: 1001,
label: '三级 2001-1-1',
children: []
}]
}]
}, {
id: 10,
parentId: 4,
label: '三级 1-1-2',
children: []
}]
}, {
id: 20,
parentId: 1,
label: '123',
children: []
}, {
id: 25,
parentId: 1,
label: '12456',
children: []
}]
}, {
parentId: -1,
id: 2,
label: '一级 2',
children: [{
parentId: 2,
id: 5,
label: '二级 2-1',
children: []
}, {
parentId: 2,
id: 6,
label: '二级 2-2',
children: []
}]
}, {
parentId: -1,
id: 3,
label: '一级 3',
children: [{
parentId: 3,
id: 7,
label: '二级 3-1',
children: []
}, {
parentId: 3,
id: 8,
label: '二级 3-2',
children: []
}]
}],
multiProps: {
children: 'children',
label: 'label'
}
}
methods: {
clickDeal(currentObj, treeStatus){
this.clickCheck(currentObj, treeStatus,this.$refs.tree)
},
/**
* 树形菜单复选框父子节点不关联实现父子节点联动回显
*
* @see selectedParent - 处理父节点为选中
* @see uniteChildSame - 处理子节点为相同的勾选状态
* @see removeParent - 子节点全没选中取消父级的选中状态
*
* @param {Object} currentObj - 当前勾选节点的对象
* @param {Object} treeStatus - 树目前的选中状态对象
* @param {Object} ref - this.$refs.xxx
**/
clickCheck(currentObj, treeStatus, ref) {
// 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
let selected = treeStatus.checkedKeys.indexOf(currentObj.id); // -1未选中
// 选中
if (selected !== -1) {
// 子节点只要被选中父节点就被选中
this.selectedParent(currentObj, ref);
// 统一处理子节点为相同的勾选状态
this.uniteChildSame(currentObj, true, ref);
} else {
// 取消子节点的选中状态触发
if (currentObj.parentId !== -1) {
this.removeParent(currentObj, ref);
}
// 未选中 处理子节点全部未选中
if (currentObj.children.length !== 0) {
this.uniteChildSame(currentObj, false, ref);
}
}
},
/** 统一处理子节点为相同的勾选状态 **/
uniteChildSame(treeList, isSelected, ref) {
let treeListData = treeList.children;
let len = treeListData.length;
ref.setChecked(treeList.id, isSelected);
for (let i = 0; i < len; i++) {
this.uniteChildSame(treeListData[i], isSelected, ref);
}
},
/** 统一处理父节点为选中 **/
selectedParent(currentObj, ref) {
let currentNode = ref.getNode(currentObj);
if (currentNode.parent.key !== undefined) {
ref.setChecked(currentNode.parent, true);
return this.selectedParent(currentNode.parent, ref);
}
},
/** 子节点全没选中取消父级的选中状态 **/
removeParent(currentObj, ref) {
let a = 0;
let b = 0;
let currentNode = ref.getNode(currentObj);
if (currentNode.parent !== null) {
if (currentNode.parent.key !== undefined) {
ref.setChecked(currentNode.parent, true); //根节点
this.removeParent(currentNode.parent, ref); //递归判断子节点
}
}
//不为0表示为父节点
if (currentNode.childNodes.length !== 0) {
//循环判断父节点下的子节点
for (let i = 0; i < currentNode.childNodes.length; i++) {
//判断父节点下的子节点是否全为false
if (currentNode.childNodes[i].checked === false) {
++a;
//a === currentNode.childNodes.length 表明子节点全为false
if (a === currentNode.childNodes.length) {
//等于 undefined 跳过,不等于继续执行
if (currentNode.childNodes[i].parent.key !== undefined) {
ref.setChecked(currentNode.childNodes[i].parent, false); //父元素设置为false
//循环上级父节点下的子节点
for (let i = 0; i < currentNode.parent.childNodes.length; i++) {
//判断父节点下的子节点是否全为false
if (currentNode.parent.childNodes[i].checked === false) {
++b;
//b === currentNode.parent.childNodes.length 表明子节点全为false
if (b === currentNode.parent.childNodes.length) {
ref.setChecked(currentNode.parent.key, false); //父元素设置为false
return this.removeParent(currentNode.parent, ref); //继续递归循环判断
}
}
}
}
}
}
}
}
},
}
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！