解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑
el-tree 在編輯中回顯數(shù)據(jù)時(shí)，有一個(gè)bug，就是只要我們回顯的數(shù)據(jù)中有父節(jié)點(diǎn)的 id，不管當(dāng)前父節(jié)點(diǎn)下的子節(jié)點(diǎn)是部分選中還是全選中，回顯的效果是該父子節(jié)點(diǎn)下的子節(jié)點(diǎn)都會(huì)全選中，這很顯然不是我們需要的
看大家有用自己的辦法解決，比如有說用 check-strictly 來控制父子互不互相關(guān)聯(lián)的做法，還有自己手動(dòng)寫函數(shù)來控制父子節(jié)點(diǎn)的選中狀態(tài)，但是方法多感覺很繁瑣。
我這里用 getNode() 的方法來簡(jiǎn)單解決
預(yù)計(jì)的效果
目前實(shí)際效果
先上代碼看如何實(shí)現(xiàn)
template 部分
<el-tree :data="list.data" show-checkbox node-key="id" :props="defaultProps" :default-expand-all="list.isExpand" v-loading="list.loading" ref="tree" @check-change="checkChange"> </el-tree>
js 部分
export default {
data () {
return {
list: {
data: [],
loading: false,
isExpand: true
},
defaultProps: {
children: 'children',
label: 'name'
},
loading:false
}
},
methods: {
defaultChecked () { // 默認(rèn)選中
this.$nextTick(() => {
const arr = []
this.menus.forEach(item => {
if (!this.$refs.tree.getNode(item.id).childNodes || !this.$refs.tree.getNode(item.id).childNodes.length) {
arr.push(item.id)
}
})
this.$refs.tree.setCheckedKeys(arr)
})
},
}
}
解析：this.menus 是從后端獲取回來的數(shù)據(jù)，getNode() 獲取到當(dāng)前節(jié)點(diǎn)，判斷當(dāng)前節(jié)點(diǎn)是否是葉子節(jié)點(diǎn)，是的話存入 arr 數(shù)組中，最后使用 setCheckedKeys() 將數(shù)據(jù)回顯選中，從而實(shí)現(xiàn)父級(jí)的半選狀態(tài)
打印了一下Node 節(jié)點(diǎn)
以上就是解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑的詳細(xì)內(nèi)容，更多關(guān)于el-tree 數(shù)據(jù)回顯的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- vue2+elementUI的el-tree的選中、高亮、定位功能的實(shí)現(xiàn)
- ElementUI中el-tree如何獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
- el-tree使用獲取當(dāng)前選中節(jié)點(diǎn)的父節(jié)點(diǎn)數(shù)據(jù)
- 餓了么UI中el-tree樹節(jié)點(diǎn)選中高亮的兩種常用方式(highlight-current屬性)
- el-tree設(shè)置選中高亮/焦點(diǎn)高亮、選中節(jié)點(diǎn)加深背景及更改字體顏色等的方法
- el-tree樹狀控件如何定位到選中的節(jié)點(diǎn)的位置
相關(guān)文章
本文主要介紹了Vue路由跳轉(zhuǎn)的4種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問題及解決
這篇文章主要介紹了vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue關(guān)閉開發(fā)模式提示的簡(jiǎn)單解決辦法
Vue開發(fā)模式是一種基于Vue.js框架的開發(fā)方式,它可以幫助開發(fā)者更高效地構(gòu)建和維護(hù)復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開發(fā)模式提示的簡(jiǎn)單解決辦法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了通過vue寫一個(gè)瀑布流插件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例
今天小編就為大家分享一篇vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個(gè)即時(shí)的原子CSS引擎,它可以讓你用簡(jiǎn)短的類名來控制元素的樣式,而不需要寫復(fù)雜的CSS代碼,需要的朋友可以參考下2023-07-07
插槽slot可以說在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫(kù)的時(shí)候，我們通?？梢允褂貌宀蹃碜远x我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下2023-01-01
vue實(shí)現(xiàn)nav導(dǎo)航欄的方法
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目nav導(dǎo)航欄的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12