element tree樹形組件回顯數(shù)據(jù)問題解決
解決vue+element tree組件 回顯數(shù)據(jù)時(shí)有一個(gè)父節(jié)點(diǎn)數(shù)據(jù)下面子節(jié)點(diǎn)就都會被選中
1.當(dāng)el-tree 從后臺拿到數(shù)據(jù)動態(tài)回顯展示出來時(shí)，只要有一個(gè)父節(jié)點(diǎn)，則下面的所有子節(jié)點(diǎn)全部被勾選了
如圖所示：
后臺返回的回顯數(shù)據(jù)只有33（父節(jié)點(diǎn)組織管理）45（子節(jié)點(diǎn)個(gè)人管理），但是組織管理下的所有子節(jié)點(diǎn)都被回顯選中。
2.解決方法代碼如下
先在組件上綁定check-strictly屬性
check-strictly屬性控制是否嚴(yán)格的遵循父子不互相關(guān)聯(lián)的做法，默認(rèn)為 false
具體參考element官網(wǎng)api。
代碼如下（示例）：
<el-tree :data="menuList"
:props="menuListTreeProps"
node-key="menuId"
ref="menuListTree"
:check-strictly="isCheck"
show-checkbox>
</el-tree>
export default {
data () {
isCheck: false,
}
}
//js操作
//首先先拿到后臺返回需要回顯的id數(shù)組 假如是showData數(shù)組
//第一步先設(shè)置 check-strictly綁定的屬性為true 為了是解除父子節(jié)點(diǎn)的關(guān)聯(lián)（意思就是點(diǎn)擊勾選父節(jié)點(diǎn)的時(shí)候下邊的所有子節(jié)點(diǎn)都不會選中。）
//第二步設(shè)置回顯 使用element Api的setCheckedKeys（showData）方法進(jìn)行設(shè)置
//最后回顯成功之后通過$nextTick異步方法再把check-strictly綁定的屬性值設(shè)置為false。（一定要有這步操作，不設(shè)置的話，勾選父節(jié)點(diǎn)子節(jié)點(diǎn)不會被勾選中）
//具體代碼如下 :
this.isCheck= true //重點(diǎn)：回顯之前一定要設(shè)置為true
this.$nextTick(()=>{
this.$refs.menuListTree.setCheckedKeys(這里寫接口獲取的數(shù)據(jù)) //給樹節(jié)點(diǎn)賦值回顯
this.isCheck= false //重點(diǎn)： 賦值完成后 設(shè)置為false
})
這樣問題就解決了。
總結(jié)
總而言之需要多了解element提供的api方法以及屬性的作用，到此這篇關(guān)于element tree樹形組件回顯數(shù)據(jù)問題解決的文章就介紹到這了,更多相關(guān)element tree樹形組件回顯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用Vue.js和MJML創(chuàng)建響應(yīng)式電子郵件
這篇文章主要介紹了使用Vue.js和MJML創(chuàng)建響應(yīng)式電子郵件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue項(xiàng)目中使用crypto-js實(shí)現(xiàn)加密解密方式
這篇文章主要介紹了vue項(xiàng)目中使用crypto-js實(shí)現(xiàn)加密解密方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
vue3 setup中defineEmits與defineProps的使用案例詳解
在父組件中定義String、Number、Boolean、Array、Object、Date、Function、Symbol這些類型的數(shù)據(jù),使用defineEmits會返回一個(gè)方法,使用一個(gè)變量emits(變量名隨意)去接收,本文給大家介紹vue3 setup中defineEmits與defineProps的使用案例,感興趣的朋友一起看看吧2023-10-10
vue中配置mint-ui報(bào)css錯(cuò)誤問題的解決方法
本篇文章主要介紹了vue中配置mint-ui報(bào)css錯(cuò)誤問題的解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
今天小編就為大家分享一篇淺談v-for 和 v-if 并用時(shí)篩選條件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題
今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
JavaScript之實(shí)現(xiàn)一個(gè)簡單的Vue示例
這篇文章主要介紹了JavaScript之實(shí)現(xiàn)一個(gè)簡單的Vue示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與&
這篇文章主要給大家介紹了關(guān)于vue3使用element-plus中el-table組件報(bào)錯(cuò)關(guān)鍵字'emitsOptions'與'insertBefore'的相關(guān)資料,文中將解決方法介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
在之前的前端開發(fā)中，為了實(shí)現(xiàn)我們的需求，通常采用的方案是通過 JS/Jquery 直接操縱頁面的 DOM 元素，得益于 Jquery 對于 DOM 元素優(yōu)異的操作能力，我們可以很輕易的對獲取到的 DOM 元素進(jìn)行操作。這篇文章主要介紹了Vue 中 ref 的使用 ,需要的朋友可以參考下2019-04-04
Vue?Router路由hash模式與history模式詳細(xì)介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對應(yīng)的頁面，這就是路由跳轉(zhuǎn)2022-08-08