屬性check-strictly

官方文件提供屬性check-strictly，在顯示覆選框的情況下，是否嚴格的遵循父子不互相關聯的做法，預設為 false。
而此屬性的意思是：
預設false，父子關聯。有如下現象及問題：
1、當你通過函式設定勾選節點的時候，只要父節點被勾選子節點必會勾選上，即便設定勾選的list中無此子節點。
2、當你點選勾選複選框時候，若點選父節點，其下子節點全部統一跟隨父節點變化；若點選子節點，子節點部分勾選時父節點處於半選狀態，子節點全部勾選時父節點選中，子節點全部不勾選時父節點未選中。
設定true，嚴格的遵循父子不互相關聯。
1、當你通過函式設定勾選節點的時候，嚴格通過設定勾選的list中有無此節點來斷定是否勾選。

2、當你點選勾程式設計客棧選複選框時候，無論點選的哪個節點只會改變當前節點的勾選狀態，不存在半選狀態。

系統的角色選單控制的問題

問題來了，在系統的角色選單控制的時候，需要滿足以下條件：
1、當通過函式設定勾選節點的時候，需要嚴格通過設定勾選的list中有無此節點來斷定是否勾選，即勾選父節點而不一定勾選全部子節點。
2、當點選勾選複選框時候，若點選父節點，其下子節點全部統一跟隨父節點變化。
3、當點選勾選複選框時候，若點選子節點，子節點部分勾選時父節點處於半選狀態，子節點全部勾選時父節點選中，子節點全部不勾選時父節點未選中。

需求思考：

一、check-strictly=false，行不通

按照需要滿足的條件，明顯靠近將check-strictly設定為false，於是從check-strictly=false父子互相關聯的基礎入手，需要解決的問題就是：

將尚未全部勾選的子節點對應的父節點改為半勾選狀態，但是查詢文件良久無果。
只有getHalfCheckedKeys和getHalfCheckedNodes，並沒有設定成半勾選。

二、check-strictly=truVduiyTYWme，試一試

只能試一下將check-strictly設定為true，從check-strictly=true嚴格的遵循父子不互相關聯入手，需要解決的問題就是：
1、當點選勾選複選框時候，若點選父節點，其下子節點全部統一跟隨父節點變化。
2、當點選勾選複選框時候，若點選子節點，子節點部分勾選時父節點處於半選狀態，子節點全部勾選時父節點選中，子節點全部不勾選時父節點未選中。

而在嚴格的父子不互相關聯時，點選父子節點不會出現半選狀態，也無法通過函式設定半選狀態，無奈簡化解決問題：
1、當點選勾選複選框時候，若狀態為 選中 ：
1.1、其所有 父節點 （父節點、父節點的父節點以此類推）全部統一跟隨當前節點變化為 選中 。
1.2、其下 子節點 全部統一跟隨父節點變化為 選中 。
2、當點選勾選複選框時候，若狀態為 未選中 ，其下 子節點 全部統一跟隨父節點變化為 未選中 。

解決程式碼：

1、el-tree標籤屬性

<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：每個樹節點用來作為唯一標識的屬性，整棵樹應該是唯一的。標識節點唯一的鍵值名稱。
default-checked-keys = checkedId：對應el-tree多選樹元件初始化時預設選中ID
check-strictly = true：是否嚴格的遵循父子不互相關聯的做法
check：當複選框被點選的時候觸發的方法
props：配置選項，具體看下圖。

而根據後臺的返回，針對:props=“multiProps”，我的配置為：

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

識別childs欄位為子節點name為節點名稱，而預設是識別children為子節點label為節點名稱。

2、el-tree元件有變化時給多選樹重新賦值

updated () {
 // 給多選樹設定預設值
  this.$refs.tree.setCheckedKeys(this.checkedId)
},

checkedId為勾選節點的陣列，不區分父子節點。

3、複選框點選時的特殊處理

clickDeal (currentObj,treeStatus) {
  // 用於：父子節點嚴格互不關聯時，父節點勾選變化時通知子節點同步變化，實現單向關聯。
  let selected = treeStatus.checkedKeys.indexOf(currentObj.menuId) // -1未選中
  // 選中
  if (selechttp://www.cppcns.comted !== -1) {
    // 子節點只要被選中父節點就被選中
    this.selectedParent(currentObj)
    // 統一處理子節點為相同的勾選狀態
    this.uniteChildSame(currentObj,true)
  } else {
    // 未選中 處理子節點全部未選中
    if (currentObj.childs.length !== 0) {
      this.uniteChildSame(currentObj,false)
    }
  }
},// 統一處理子節點為相同的勾選狀態
程式設計客棧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)
  }
},// 統一處理父節點為選中
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)
  }
},

到此這篇關於element的el-tree多選樹(複選框)父子節點關聯不關聯的www.cppcns.com文章就介紹到這了,更多相關element el-tree多選樹不關聯內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！