屬性check-strictly

官方文檔提供屬性check-strictly，在顯示復(fù)選框的情況下，是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法，默認(rèn)為 false。
而此屬性的意思是：
默認(rèn)false，父子關(guān)聯(lián)。有如下現(xiàn)象及問題：
1、當(dāng)你通過函數(shù)設(shè)置勾選節(jié)點(diǎn)的時(shí)候，只要父節(jié)點(diǎn)被勾選子節(jié)點(diǎn)必會勾選上，即便設(shè)置勾選的list中無此子節(jié)點(diǎn)。
2、當(dāng)你點(diǎn)擊勾選復(fù)選框時(shí)候，若點(diǎn)擊父節(jié)點(diǎn)，其下子節(jié)點(diǎn)全部統(tǒng)一跟隨父節(jié)點(diǎn)變化；若點(diǎn)擊子節(jié)點(diǎn)，子節(jié)點(diǎn)部分勾選時(shí)父節(jié)點(diǎn)處于半選狀態(tài)，子節(jié)點(diǎn)全部勾選時(shí)父節(jié)點(diǎn)選中，子節(jié)點(diǎn)全部不勾選時(shí)父節(jié)點(diǎn)未選中。
設(shè)置true，嚴(yán)格的遵循父子不互相關(guān)聯(lián)。
1、當(dāng)你通過函數(shù)設(shè)置勾選節(jié)點(diǎn)的時(shí)候，嚴(yán)格通過設(shè)置勾選的list中有無此節(jié)點(diǎn)來斷定是否勾選。
2、當(dāng)你點(diǎn)擊勾選復(fù)選框時(shí)候，無論點(diǎn)擊的哪個節(jié)點(diǎn)只會改變當(dāng)前節(jié)點(diǎn)的勾選狀態(tài)，不存在半選狀態(tài)。

系統(tǒng)的角色菜單控制的問題

問題來了，在系統(tǒng)的角色菜單控制的時(shí)候，需要滿足以下條件：
1、當(dāng)通過函數(shù)設(shè)置勾選節(jié)點(diǎn)的時(shí)候，需要嚴(yán)格通過設(shè)置勾選的list中有無此節(jié)點(diǎn)來斷定是否勾選，即勾選父節(jié)點(diǎn)而不一定勾選全部子節(jié)點(diǎn)。
2、當(dāng)點(diǎn)擊勾選復(fù)選框時(shí)候，若點(diǎn)擊父節(jié)點(diǎn)，其下子節(jié)點(diǎn)全部統(tǒng)一跟隨父節(jié)點(diǎn)變化。
3、當(dāng)點(diǎn)擊勾選復(fù)選框時(shí)候，若點(diǎn)擊子節(jié)點(diǎn)，子節(jié)點(diǎn)部分勾選時(shí)父節(jié)點(diǎn)處于半選狀態(tài)，子節(jié)點(diǎn)全部勾選時(shí)父節(jié)點(diǎn)選中，子節(jié)點(diǎn)全部不勾選時(shí)父節(jié)點(diǎn)未選中。

需求思考：

一、check-strictly=false，行不通

按照需要滿足的條件，明顯靠近將check-strictly設(shè)置為false，于是從check-strictly=false父子互相關(guān)聯(lián)的基礎(chǔ)入手，需要解決的問題就是：
將尚未全部勾選的子節(jié)點(diǎn)對應(yīng)的父節(jié)點(diǎn)改為半勾選狀態(tài)，但是查找文檔良久無果。
只有g(shù)etHalfCheckedKeys和getHalfCheckedNodes，并沒有設(shè)置成半勾選。

二、check-strictly=true，試一試

只能試一下將check-strictly設(shè)置為true，從check-strictly=true嚴(yán)格的遵循父子不互相關(guān)聯(lián)入手，需要解決的問題就是：
1、當(dāng)點(diǎn)擊勾選復(fù)選框時(shí)候，若點(diǎn)擊父節(jié)點(diǎn)，其下子節(jié)點(diǎn)全部統(tǒng)一跟隨父節(jié)點(diǎn)變化。
2、當(dāng)點(diǎn)擊勾選復(fù)選框時(shí)候，若點(diǎn)擊子節(jié)點(diǎn)，子節(jié)點(diǎn)部分勾選時(shí)父節(jié)點(diǎn)處于半選狀態(tài)，子節(jié)點(diǎn)全部勾選時(shí)父節(jié)點(diǎn)選中，子節(jié)點(diǎn)全部不勾選時(shí)父節(jié)點(diǎn)未選中。
而在嚴(yán)格的父子不互相關(guān)聯(lián)時(shí)，點(diǎn)擊父子節(jié)點(diǎn)不會出現(xiàn)半選狀態(tài)，也無法通過函數(shù)設(shè)置半選狀態(tài)，無奈簡化解決問題：
1、當(dāng)點(diǎn)擊勾選復(fù)選框時(shí)候，若狀態(tài)為 選中 ：
1.1、其所有 父節(jié)點(diǎn) （父節(jié)點(diǎn)、父節(jié)點(diǎn)的父節(jié)點(diǎn)以此類推）全部統(tǒng)一跟隨當(dāng)前節(jié)點(diǎn)變化為 選中 。
1.2、其下 子節(jié)點(diǎn) 全部統(tǒng)一跟隨父節(jié)點(diǎn)變化為 選中 。
2、當(dāng)點(diǎn)擊勾選復(fù)選框時(shí)候，若狀態(tài)為 未選中 ，其下 子節(jié)點(diǎn) 全部統(tǒng)一跟隨父節(jié)點(diǎn)變化為 未選中 。

解決代碼：

1、el-tree標(biāo)簽屬性

<el-tree ref="tree" :data="treeMenus" :props="multiProps" :show-checkbox="true"
 node-key="menuId" highlight-current :expand-on-click-node="false" 
 :default-checked-keys="checkedId" :check-strictly="true" @check="clickDeal">

node-key：每個樹節(jié)點(diǎn)用來作為唯一標(biāo)識的屬性，整棵樹應(yīng)該是唯一的。標(biāo)識節(jié)點(diǎn)唯一的鍵值名稱。
default-checked-keys = checkedId：對應(yīng)el-tree多選樹組件初始化時(shí)默認(rèn)選中ID
check-strictly = true：是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法
check：當(dāng)復(fù)選框被點(diǎn)擊的時(shí)候觸發(fā)的方法
props：配置選項(xiàng)，具體看下圖。

而根據(jù)后臺的返回，針對:props=“multiProps”，我的配置為：

multiProps: {
  children: 'childs',
  label: 'name',
  disabled: this.isDisabled
}

識別childs字段為子節(jié)點(diǎn)name為節(jié)點(diǎn)名稱，而默認(rèn)是識別children為子節(jié)點(diǎn)label為節(jié)點(diǎn)名稱。

2、el-tree組件有變化時(shí)給多選樹重新賦值

updated () {
 // 給多選樹設(shè)置默認(rèn)值
  this.$refs.tree.setCheckedKeys(this.checkedId)
},

checkedId為勾選節(jié)點(diǎn)的數(shù)組，不區(qū)分父子節(jié)點(diǎn)。

3、復(fù)選框點(diǎn)擊時(shí)的特殊處理

clickDeal (currentObj, treeStatus) {
  // 用于：父子節(jié)點(diǎn)嚴(yán)格互不關(guān)聯(lián)時(shí)，父節(jié)點(diǎn)勾選變化時(shí)通知子節(jié)點(diǎn)同步變化，實(shí)現(xiàn)單向關(guān)聯(lián)。
  let selected = treeStatus.checkedKeys.indexOf(currentObj.menuId) // -1未選中
  // 選中
  if (selected !== -1) {
    // 子節(jié)點(diǎn)只要被選中父節(jié)點(diǎn)就被選中
    this.selectedParent(currentObj)
    // 統(tǒng)一處理子節(jié)點(diǎn)為相同的勾選狀態(tài)
    this.uniteChildSame(currentObj, true)
  } else {
    // 未選中 處理子節(jié)點(diǎn)全部未選中
    if (currentObj.childs.length !== 0) {
      this.uniteChildSame(currentObj, false)
    }
  }
},
// 統(tǒng)一處理子節(jié)點(diǎn)為相同的勾選狀態(tài)
uniteChildSame (treeList, isSelected) {
  this.$refs.tree.setChecked(treeList.menuId, isSelected)
  for (let i = 0; i < treeList.childs.length; i++) {
    this.uniteChildSame(treeList.childs[i], isSelected)
  }
},
// 統(tǒng)一處理父節(jié)點(diǎn)為選中
selectedParent (currentObj) {
  let currentNode = this.$refs.tree.getNode(currentObj)
  if (currentNode.parent.key !== undefined) {
    this.$refs.tree.setChecked(currentNode.parent, true)
    this.selectedParent(currentNode.parent)
  }
},

到此這篇關(guān)于element的el-tree多選樹(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)的文章就介紹到這了,更多相關(guān)element el-tree多選樹不關(guān)聯(lián)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論