element tree樹形組件回顯數據問題解決
更新時間：2022年08月14日 11:22:06 作者：bigSmileZ
本文主要介紹了element tree樹形組件回顯數據問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
解決vue+element tree組件 回顯數據時有一個父節(jié)點數據下面子節(jié)點就都會被選中
1.當el-tree 從后臺拿到數據動態(tài)回顯展示出來時，只要有一個父節(jié)點，則下面的所有子節(jié)點全部被勾選了
如圖所示：
后臺返回的回顯數據只有33（父節(jié)點組織管理）45（子節(jié)點個人管理），但是組織管理下的所有子節(jié)點都被回顯選中。
2.解決方法代碼如下
先在組件上綁定check-strictly屬性
check-strictly屬性控制是否嚴格的遵循父子不互相關聯的做法，默認為 false
具體參考element官網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數組 假如是showData數組
//第一步先設置 check-strictly綁定的屬性為true 為了是解除父子節(jié)點的關聯（意思就是點擊勾選父節(jié)點的時候下邊的所有子節(jié)點都不會選中。）
//第二步設置回顯 使用element Api的setCheckedKeys（showData）方法進行設置
//最后回顯成功之后通過$nextTick異步方法再把check-strictly綁定的屬性值設置為false。（一定要有這步操作，不設置的話，勾選父節(jié)點子節(jié)點不會被勾選中）
//具體代碼如下 :
this.isCheck= true //重點：回顯之前一定要設置為true
this.$nextTick(()=>{
this.$refs.menuListTree.setCheckedKeys(這里寫接口獲取的數據) //給樹節(jié)點賦值回顯
this.isCheck= false //重點： 賦值完成后 設置為false
})
這樣問題就解決了。
總結
總而言之需要多了解element提供的api方法以及屬性的作用，到此這篇關于element tree樹形組件回顯數據問題解決的文章就介紹到這了,更多相關element tree樹形組件回顯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文直接上 Vue3 + TypeScript + Element Plus 開發(fā)的內容，感興趣的話一起來看看吧2021-08-08
Vue3中使用vuedraggable拖拽實戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實戰(zhàn)教程,文中通過示例介紹了vue3拖拽組件vuedraggable的使用demo，需要的朋友可以參考下2023-06-06
為什么要在標題里加上一個業(yè)務數據的上報呢，因為在咱們前端項目中，可上報的數據維度太多，比如還有性能數據、頁面錯誤數據、console捕獲等。這里我們只講解業(yè)務數據的埋點。2021-05-05
這篇文章主要介紹了vue文件使用iconfont解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue $refs動態(tài)拼接獲取值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題
setinterval()是定時調用的函數,可按照指定的周期（以毫秒計）來調用函數或計算表達式,這篇文章主要給大家介紹了關于vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題,需要的朋友可以參考下2024-01-01
為了快速學習nodejs制作后端并和數據庫進行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關于手把手帶你使用vue+node作后端連接數據庫的相關資料,需要的朋友可以參考下2023-03-03
Vue3+Element?Plus實現el-table跨行顯示(非腳手架)
這篇文章主要介紹了Vue3+Element Plus實現el-table跨行顯示(非腳手架),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
解讀element-ui使用el-upload,before-upload函數不好使的問題
這篇文章主要介紹了解讀element-ui使用el-upload,before-upload函數不好使的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
下面小編就為大家分享一篇使用use注冊Vue全局組件和全局指令的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03