本文主要介紹了element tree樹(shù)形組件回顯數(shù)據(jù)問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1.當(dāng)el-tree 從后臺(tái)拿到數(shù)據(jù)動(dòng)態(tài)回顯展示出來(lái)時(shí)，只要有一個(gè)父節(jié)點(diǎn)，則下面的所有子節(jié)點(diǎn)全部被勾選了

如圖所示：

在這里插入圖片描述

后臺(tái)返回的回顯數(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操作
//首先先拿到后臺(tái)返回需要回顯的id數(shù)組  假如是showData數(shù)組
//第一步先設(shè)置 check-strictly綁定的屬性為true 為了是解除父子節(jié)點(diǎn)的關(guān)聯(lián)（意思就是點(diǎn)擊勾選父節(jié)點(diǎn)的時(shí)候下邊的所有子節(jié)點(diǎn)都不會(huì)選中。）
//第二步設(shè)置回顯 使用element Api的setCheckedKeys（showData）方法進(jìn)行設(shè)置
//最后回顯成功之后通過(guò)$nextTick異步方法再把check-strictly綁定的屬性值設(shè)置為false。（一定要有這步操作，不設(shè)置的話，勾選父節(jié)點(diǎn)子節(jié)點(diǎn)不會(huì)被勾選中）
//具體代碼如下 :
this.isCheck= true //重點(diǎn)：回顯之前一定要設(shè)置為true
this.$nextTick(()=>{
	this.$refs.menuListTree.setCheckedKeys(這里寫(xiě)接口獲取的數(shù)據(jù)) //給樹(shù)節(jié)點(diǎn)賦值回顯
    this.isCheck= false //重點(diǎn)： 賦值完成后 設(shè)置為false
})

這樣問(wèn)題就解決了。

總結(jié)

總而言之需要多了解element提供的api方法以及屬性的作用，到此這篇關(guān)于element tree樹(shù)形組件回顯數(shù)據(jù)問(wèn)題解決的文章就介紹到這了,更多相關(guān)element tree樹(shù)形組件回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: