应用场景：
动态路由权限配置，菜单和按钮在一颗树内显示，要求按钮可以不被勾选（按钮一定为叶子节点），即叶子节点可以不严格关联
此时我们的tree需要设置node-key、check-strictly为true,
截屏2020-04-17下午11.20.04.png
截屏2020-04-17下午11.23.54.png
实现逻辑
监听tree的check事件和treesetChecked方法
tips：tree的数据（data）每级需要有上级的父节点id字段
实现方法
1.组建设置，如果返回的数据字段与tree的指定字段不相同，通过props设置
<el-tree
:data="treeData"
node-key="id"
show-checkbox
check-strictly
ref="tree"
@check="hanleCheck"
></el-tree>
2.监听treecheck方法，这里我们设置上次id的字段为parentId
hanleCheck(data,node){
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(parentId)
// 如果该id的父级node存在父级id则继续遍历
parentNode.data.parentId && setParentChecked(setParentChecked)
// 设置该id的节点为选中状态
_this.$refs.tree.setChecked(parenId,true)
}
function setChildreChecked(node,isChecked){
node.forEach(item => {
item.children && setChildreChecked(item.children,isChecked)
_this.$refs.setChecked(item.id,isChecked)
})
}
}
案例
屏幕录制2020-04-18上午12.24.07.gif
