element的el-tree多選樹(復(fù)選框)父子節(jié)點關(guān)聯(lián)不關(guān)聯(lián)
屬性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é)點的時候,只要父節(jié)點被勾選子節(jié)點必會勾選上,即便設(shè)置勾選的list中無此子節(jié)點。
2、當(dāng)你點擊勾選復(fù)選框時候,若點擊父節(jié)點,其下子節(jié)點全部統(tǒng)一跟隨父節(jié)點變化;若點擊子節(jié)點,子節(jié)點部分勾選時父節(jié)點處于半選狀態(tài),子節(jié)點全部勾選時父節(jié)點選中,子節(jié)點全部不勾選時父節(jié)點未選中。
設(shè)置true,嚴(yán)格的遵循父子不互相關(guān)聯(lián)。
1、當(dāng)你通過函數(shù)設(shè)置勾選節(jié)點的時候,嚴(yán)格通過設(shè)置勾選的list中有無此節(jié)點來斷定是否勾選。
2、當(dāng)你點擊勾選復(fù)選框時候,無論點擊的哪個節(jié)點只會改變當(dāng)前節(jié)點的勾選狀態(tài),不存在半選狀態(tài)。
系統(tǒng)的角色菜單控制的問題
問題來了,在系統(tǒng)的角色菜單控制的時候,需要滿足以下條件:
1、當(dāng)通過函數(shù)設(shè)置勾選節(jié)點的時候,需要嚴(yán)格通過設(shè)置勾選的list中有無此節(jié)點來斷定是否勾選,即勾選父節(jié)點而不一定勾選全部子節(jié)點。
2、當(dāng)點擊勾選復(fù)選框時候,若點擊父節(jié)點,其下子節(jié)點全部統(tǒng)一跟隨父節(jié)點變化。
3、當(dāng)點擊勾選復(fù)選框時候,若點擊子節(jié)點,子節(jié)點部分勾選時父節(jié)點處于半選狀態(tài),子節(jié)點全部勾選時父節(jié)點選中,子節(jié)點全部不勾選時父節(jié)點未選中。
需求思考:
一、check-strictly=false,行不通
按照需要滿足的條件,明顯靠近將check-strictly設(shè)置為false,于是從check-strictly=false父子互相關(guān)聯(lián)的基礎(chǔ)入手,需要解決的問題就是:
將尚未全部勾選的子節(jié)點對應(yīng)的父節(jié)點改為半勾選狀態(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)點擊勾選復(fù)選框時候,若點擊父節(jié)點,其下子節(jié)點全部統(tǒng)一跟隨父節(jié)點變化。
2、當(dāng)點擊勾選復(fù)選框時候,若點擊子節(jié)點,子節(jié)點部分勾選時父節(jié)點處于半選狀態(tài),子節(jié)點全部勾選時父節(jié)點選中,子節(jié)點全部不勾選時父節(jié)點未選中。
而在嚴(yán)格的父子不互相關(guān)聯(lián)時,點擊父子節(jié)點不會出現(xiàn)半選狀態(tài),也無法通過函數(shù)設(shè)置半選狀態(tài),無奈簡化解決問題:
1、當(dāng)點擊勾選復(fù)選框時候,若狀態(tài)為 選中 :
1.1、其所有 父節(jié)點 (父節(jié)點、父節(jié)點的父節(jié)點以此類推)全部統(tǒng)一跟隨當(dāng)前節(jié)點變化為 選中 。
1.2、其下 子節(jié)點 全部統(tǒng)一跟隨父節(jié)點變化為 選中 。
2、當(dāng)點擊勾選復(fù)選框時候,若狀態(tài)為 未選中 ,其下 子節(jié)點 全部統(tǒng)一跟隨父節(jié)點變化為 未選中 。
解決代碼:
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é)點用來作為唯一標(biāo)識的屬性,整棵樹應(yīng)該是唯一的。標(biāo)識節(jié)點唯一的鍵值名稱。
default-checked-keys = checkedId:對應(yīng)el-tree多選樹組件初始化時默認(rèn)選中ID
check-strictly = true:是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法
check:當(dāng)復(fù)選框被點擊的時候觸發(fā)的方法
props:配置選項,具體看下圖。
而根據(jù)后臺的返回,針對:props=“multiProps”,我的配置為:
multiProps: { children: 'childs', label: 'name', disabled: this.isDisabled }
識別childs字段為子節(jié)點name為節(jié)點名稱,而默認(rèn)是識別children為子節(jié)點label為節(jié)點名稱。
2、el-tree組件有變化時給多選樹重新賦值
updated () { // 給多選樹設(shè)置默認(rèn)值 this.$refs.tree.setCheckedKeys(this.checkedId) },
checkedId為勾選節(jié)點的數(shù)組,不區(qū)分父子節(jié)點。
3、復(fù)選框點擊時的特殊處理
clickDeal (currentObj, treeStatus) { // 用于:父子節(jié)點嚴(yán)格互不關(guān)聯(lián)時,父節(jié)點勾選變化時通知子節(jié)點同步變化,實現(xiàn)單向關(guān)聯(lián)。 let selected = treeStatus.checkedKeys.indexOf(currentObj.menuId) // -1未選中 // 選中 if (selected !== -1) { // 子節(jié)點只要被選中父節(jié)點就被選中 this.selectedParent(currentObj) // 統(tǒng)一處理子節(jié)點為相同的勾選狀態(tài) this.uniteChildSame(currentObj, true) } else { // 未選中 處理子節(jié)點全部未選中 if (currentObj.childs.length !== 0) { this.uniteChildSame(currentObj, false) } } }, // 統(tǒng)一處理子節(jié)點為相同的勾選狀態(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é)點為選中 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é)點關(guān)聯(lián)不關(guān)聯(lián)的文章就介紹到這了,更多相關(guān)element el-tree多選樹不關(guān)聯(lián)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 關(guān)于extjs treepanel復(fù)選框選中父節(jié)點與子節(jié)點的問題
- vue基于element-ui的三級CheckBox復(fù)選框功能的實現(xiàn)代碼
- vue+element UI實現(xiàn)樹形表格帶復(fù)選框的示例代碼
- vuejs+element UI table表格中實現(xiàn)禁用部分復(fù)選框的方法
- el-table?選中行與復(fù)選框相互聯(lián)動的實現(xiàn)步驟
- Vue3+ElementUI 多選框中復(fù)選框和名字點擊方法效果分離方法
- 使用element組件table表格實現(xiàn)某條件下復(fù)選框無法勾選
- Vue el-table復(fù)選框全部勾選及勾選回顯功能實現(xiàn)
- el-table表格點擊該行任意位置時也勾選上其前面的復(fù)選框
相關(guān)文章
Vue.js在數(shù)組中插入重復(fù)數(shù)據(jù)的實現(xiàn)代碼
這篇文章主要介紹了Vue.js在數(shù)組中插入重復(fù)數(shù)據(jù)的實現(xiàn)代碼,需要的朋友可以參考下2017-11-11vue3中el-table實現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中el-table實現(xiàn)多表頭并表格合并行或列的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02vue 1.0 結(jié)合animate.css定義動畫效果
本文分步驟給大家介紹了Vue 1.0自定義動畫效果,vue1.0代碼結(jié)合animate.css定義動畫,頁面一定要引入animate.cdd,具體實例代碼大家參考下本文2018-07-07vue鼠標(biāo)懸停事件監(jiān)聽實現(xiàn)方法
頁面在鼠標(biāo)懸停(不動)n秒之后,頁面進(jìn)行相應(yīng)的事件,下面這篇文章主要給大家介紹了關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09Vue-router跳轉(zhuǎn)和location.href的區(qū)別及說明
Vue?Router是Vue.js官方的路由管理器,它允許我們通過定義路由來管理應(yīng)用程序的不同視圖和狀態(tài),Vue路由跳轉(zhuǎn)主要有以下幾種方式:<router-link>標(biāo)簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法2025-01-01