需求

選中子節(jié)點的時候，父節(jié)點必須被選中，但是僅展示被選中父節(jié)點和子節(jié)點

解決方法

方法1

html部分代碼：

 <el-tree
     class="filter-tree"
     node-key="enCode"
     :data="areaTree"
     :props="defaultProps"
     :default-checked-keys="defaultChecked"
     :expand-on-click-node="false"
     show-checkbox
     default-expand-all
     ref="areaTrees">
</el-tree>

當需要動態(tài)改變樹形結(jié)構(gòu)的默認勾選值（例如每條數(shù)據(jù)都需要調(diào)接口查詢，根據(jù)查詢結(jié)果渲染樹的選中情況）時，只修改defaultChecked的時，值的改變沒有渲染相應(yīng)的樹節(jié)點，需要通過調(diào)用setCheckedKeys方法來改變選中狀態(tài)：

js代碼：

this.$nextTick(() => {
     this.$refs.areaTrees.setCheckedKeys(this.defaultChecked);
})

方法2

結(jié)合tree的ref屬性

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  ref="tree"
  :props="defaultProps">
</el-tree>

js代碼:

this.$refs.tree.getCheckedNodes(false, true);

通過getCheckedNodes獲取所有選中節(jié)點

編輯處理

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  ref="tree"
  :default-checked-keys="defaultKeys"
  :check-strictly="true"
  :props="defaultProps">
</el-tree>

最初準備使用default-checked-keys屬性，但是并非預(yù)期的效果，因為如果defaultKeys包含父節(jié)點，那么它所屬的子節(jié)點都會被選中，即使你新增的時候沒有選中其中的某個子節(jié)點。
找了找屬性，看到了check-strictly，其描述為"在顯示復(fù)選框的情況下，是否嚴格的遵循父子不互相關(guān)聯(lián)的做法，默認為 false"，試了一下，展示效果沒有問題，但是選中子類的時候，父類不會被選中，選中父類的時候，子類也不會被勾選，等于完全不在關(guān)聯(lián)，也不是想要的效果。

最終處理

 this.$refs.tree.setChecked(key/data, checked, deep);

已選中的key循環(huán)使用setChecked處理，具體參數(shù)描述如下

(key/data, checked, deep) 接收三個參數(shù)，1. 勾選節(jié)點的 key 或者 data 2. boolean 類型，節(jié)點是否選中 3. boolean 類型，是否設(shè)置子節(jié)點 ，默認為 false

其中有用的是第三個參數(shù)，不再對子節(jié)點進行設(shè)置，這樣即保持了新增時候的選中效果，又可以點擊父節(jié)點對子節(jié)點進行全部選中或者全部取消的效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-857741.html

到了這里，關(guān)于解決element ui中的el-tree組件default-checked-keys默認勾選節(jié)點問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！