應(yīng)用場景：
動態(tài)路由權(quán)限配置捆姜，菜單和按鈕在一顆樹內(nèi)顯示，要求按鈕可以不被勾選（按鈕一定為葉子節(jié)點）裁僧，即葉子節(jié)點可以不嚴(yán)格關(guān)聯(lián)
此時我們的tree需要設(shè)置node-key、check-strictly為true,
截屏2020-04-17下午11.20.04.png
截屏2020-04-17下午11.23.54.png
實現(xiàn)邏輯
監(jiān)聽tree的check事件和treesetChecked方法
tips：tree的數(shù)據(jù)（data）每級需要有上級的父節(jié)點id字段
實現(xiàn)方法
1.組建設(shè)置，如果返回的數(shù)據(jù)字段與tree的指定字段不相同怔揩，通過props設(shè)置
<el-tree
:data="treeData"
node-key="id"
show-checkbox
check-strictly
ref="tree"
@check="hanleCheck"
></el-tree>
2.監(jiān)聽treecheck方法，這里我們設(shè)置上次id的字段為parentId
hanleCheck(data,node){
const _this = this
// 獲取當(dāng)前節(jié)點是否被選中
const isChecked = this.$refs.tree.getNode(data).checked
// 如果當(dāng)前節(jié)點被選中脯丝，則遍歷上級節(jié)點和下級子節(jié)點并選中商膊，如果當(dāng)前節(jié)點取消選中，則遍歷下級節(jié)點并取消選中
if(isChecked){
// 判斷是否有上級節(jié)點宠进，如果有那么遍歷設(shè)置上級節(jié)點選中
data.parentId && setParentChecked(data.parentId)
// 判斷該節(jié)點是否有下級節(jié)點晕拆，如果有那么遍歷設(shè)置下級節(jié)點為選中
data.children && setChildreChecked(data.children,true)
}else{
// 如果節(jié)點取消選中，則取消該節(jié)點下的子節(jié)點選中
data.children && setChildreChecked(data.children,false)
}
function setParentChecked(parenId){
// 獲取該id的父級node
const parentNode = _this.$refs.tree.getNode(parentId)
// 如果該id的父級node存在父級id則繼續(xù)遍歷
parentNode.data.parentId && setParentChecked(setParentChecked)
// 設(shè)置該id的節(jié)點為選中狀態(tài)
_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
