elementui的樹形控件有個check-strictly屬性(在顯示復(fù)選框的情況下,是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法,默認(rèn)為 false),也許是太過智能了
有如下現(xiàn)象及問題:
1、當(dāng)你通過函數(shù)設(shè)置勾選節(jié)點(diǎn)的時候,只要父節(jié)點(diǎn)被勾選子節(jié)點(diǎn)必會勾選上,即便設(shè)置勾選的list中無此子節(jié)點(diǎn)。
2、當(dāng)你點(diǎn)擊勾選復(fù)選框時候,若點(diǎn)擊父節(jié)點(diǎn),其下子節(jié)點(diǎn)全部統(tǒng)一跟隨父節(jié)點(diǎn)變化;若點(diǎn)擊子節(jié)點(diǎn),子節(jié)點(diǎn)部分勾選時父節(jié)點(diǎn)處于半選狀態(tài),子節(jié)點(diǎn)全部勾選時父節(jié)點(diǎn)選中,子節(jié)點(diǎn)全部不勾選時父節(jié)點(diǎn)未選中。
設(shè)置true,嚴(yán)格的遵循父子不互相關(guān)聯(lián)。
1、當(dāng)你通過函數(shù)設(shè)置勾選節(jié)點(diǎn)的時候,嚴(yán)格通過設(shè)置勾選的list中有無此節(jié)點(diǎn)來斷定是否勾選。
2、當(dāng)你點(diǎn)擊勾選復(fù)選框時候,無論點(diǎn)擊的哪個節(jié)點(diǎn)只會改變當(dāng)前節(jié)點(diǎn)的勾選狀態(tài),不存在半選狀態(tài)。
解決辦法就是改為不互相關(guān)聯(lián),然后手動控制父級選擇后的處理
<div class="vab-tree-border">
<el-tree
ref="treeRef"
default-expand-all
:props="props"
:data="list"
node-key="ID"
show-checkbox
@check="orgCheck"
:check-strictly="true"
>
<template #default="{ data }">
<span>{{ data.Name }}</span>
</template>
</el-tree>
</div>
// vue3寫法 ID為你樹形數(shù)據(jù)中當(dāng)做唯一標(biāo)識的屬性名,Children為下一級集合的屬性名
const setChildreChecked = (node, isChecked) => {
node.forEach((item) => {
state.treeRef.setChecked(item.ID, isChecked)
if (item.Children && item.Children.length > 0) {
state.treeRef.setChecked(item.ID, isChecked)
setChildreChecked(item.Children, isChecked)
} else {
state.treeRef.setChecked(item.ID, isChecked)
}
})
}
const hanleCheck = (data, node) => {
const isCheckeds = state.treeRef.getNode(data).checked
if (isCheckeds) {
// 判斷該節(jié)點(diǎn)是否有下級節(jié)點(diǎn),如果有那么遍歷設(shè)置下級節(jié)點(diǎn)為選中
data.Children &&
data.Children.length > 0 &&
setChildreChecked(data.Children, true)
} else {
// 如果節(jié)點(diǎn)取消選中,則取消該節(jié)點(diǎn)下的子節(jié)點(diǎn)選中
data.Children &&
data.Children.length > 0 &&
setChildreChecked(data.Children, false)
}
}
const orgCheck = (data, node) => {
hanleCheck(data, node)
}
orgCheck(data,node) {//系統(tǒng)權(quán)限樹操作(多個樹同時存在可用名稱區(qū)別)
this.hanleCheck(data,node,'orgTree');
},
hanleCheck(data,node,treeName){
const _this = this
// 獲取當(dāng)前節(jié)點(diǎn)是否被選中
const isChecked = this.$refs[treeName].getNode(data).checked
// 如果當(dāng)前節(jié)點(diǎn)被選中,則遍歷下級子節(jié)點(diǎn)并選中,如果當(dāng)前節(jié)點(diǎn)取消選中,則遍歷下級節(jié)點(diǎn)并取消選中
if(isChecked){
// 判斷該節(jié)點(diǎn)是否有下級節(jié)點(diǎn),如果有那么遍歷設(shè)置下級節(jié)點(diǎn)為選中
data.childrenList && data.childrenList.length>0 && setChildreChecked(data.childrenList,true)
}else{
// 如果節(jié)點(diǎn)取消選中,則取消該節(jié)點(diǎn)下的子節(jié)點(diǎn)選中
data.childrenList && data.childrenList.length>0 && setChildreChecked(data.childrenList,false)
}
function setChildreChecked(node,isChecked){
node.forEach(item => {
data.childrenList && item.childrenList.length>0 && setChildreChecked(item.childrenList,isChecked)
_this.$refs[treeName].setChecked(item.id,isChecked)
})
}
}