el-tree 设置与上级严格关联、下级不严格关联

<el-tree :data="getUserMenuData" :props="treeProps" node-key="id" show-checkbox check-strictly
 ref="tree" :default-checked-keys="checkedId" @check="hanleCheck">
</el-tree>

data(){
	return{
		getUserMenuData:[],
		treeProps: {
			label: "title",
		},
		checkedId: [],	//回显数组
		
	}
}

hanleCheck(data, node) {
	console.log(data,'+++++++++++++++')
	const _this = this
	// 获取当前节点是否被选中
	const isChecked = this.$refs.tree.getNode(data).checked
	// 如果当前节点被选中，则遍历上级节点和下级子节点并选中，如果当前节点取消选中，则遍历下级节点并取消选中
	if (isChecked) {
		// 判断是否有上级节点，如果有那么遍历设置上级节点选中
		data.parentId && setParentChecked(data.parentId)
		// 判断该节点是否有下级节点，如果有那么遍历设置下级节点为选中
		data.children && setChildreChecked(data.children, true)
	} else {
		// 如果节点取消选中，则取消该节点下的子节点选中
		data.children && setChildreChecked(data.children, false)
	}

	function setParentChecked(parenId) {
		// 获取该id的父级node
		const parentNode = _this.$refs.tree.getNode(data.parentId)
		// 如果该id的父级node存在父级id则继续遍历
		parentNode && parentNode.data && parentNode.data.parentId && setParentChecked(parentNode.data.parentId)

		//  设置该id的节点为选中状态
		_this.$refs.tree.setChecked(parenId, true)
	}

	function setChildreChecked(node, isChecked) {
		node.forEach(item => {
			item.children && setChildreChecked(item.children, isChecked)
			_this.$refs.tree.setChecked(item.id, isChecked)
		})
	}

},

注：
监听treecheck方法，这里我们设置上级id的字段为parentId
通过parentId来判断当前节点是否有上级节点
比如说，当前的按钮是否有上级菜单
或者说，当前菜单是否还有上级菜单

效果图：

转载：
感谢分享：https://blog.csdn.net/q1ngqingsky/article/details/117131118

具体实现效果和思路请查看原文链接