element tree樹形組件回顯數據問題解決

Posted on by

解決vue+element tree組件 回顯數據時有一個父節點數據下面子節點就都會被選中

1.當el-tree 從後臺拿到數據動態回顯展示出來時，隻要有一個父節點，則下面的所有子節點全部被勾選瞭

如圖所示：

在這裡插入圖片描述

後臺返回的回顯數據隻有33（父節點組織管理）45（子節點個人管理），但是組織管理下的所有子節點都被回顯選中。

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 為瞭是解除父子節點的關聯（意思就是點擊勾選父節點的時候下邊的所有子節點都不會選中。）
//第二步設置回顯 使用element Api的setCheckedKeys（showData）方法進行設置
//最後回顯成功之後通過$nextTick異步方法再把check-strictly綁定的屬性值設置為false。（一定要有這步操作，不設置的話，勾選父節點子節點不會被勾選中）
//具體代碼如下 :
this.isCheck= true //重點：回顯之前一定要設置為true
this.$nextTick(()=>{
	this.$refs.menuListTree.setCheckedKeys(這裡寫接口獲取的數據) //給樹節點賦值回顯
    this.isCheck= false //重點： 賦值完成後 設置為false
})

這樣問題就解決瞭。

總結

總而言之需要多瞭解element提供的api方法以及屬性的作用，到此這篇關於element tree樹形組件回顯數據問題解決的文章就介紹到這瞭,更多相關element tree樹形組件回顯內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：