樹形控件選擇時父關(guān)聯(lián)子,子不關(guān)聯(lián)父的實(shí)現(xiàn)

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)
    })
  }

}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容