解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑

更新時(shí)間：2022年08月18日 10:34:21 作者：風(fēng)如也

本文主要介紹了解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

el-tree 在編輯中回顯數(shù)據(jù)時(shí)，有一個(gè)bug，就是只要我們回顯的數(shù)據(jù)中有父節(jié)點(diǎn)的 id，不管當(dāng)前父節(jié)點(diǎn)下的子節(jié)點(diǎn)是部分選中還是全選中，回顯的效果是該父子節(jié)點(diǎn)下的子節(jié)點(diǎn)都會(huì)全選中，這很顯然不是我們需要的

看大家有用自己的辦法解決，比如有說(shuō)用 check-strictly 來(lái)控制父子互不互相關(guān)聯(lián)的做法，還有自己手動(dòng)寫(xiě)函數(shù)來(lái)控制父子節(jié)點(diǎn)的選中狀態(tài)，但是方法多感覺(jué)很繁瑣。

我這里用 getNode() 的方法來(lái)簡(jiǎn)單解決

預(yù)計(jì)的效果

目前實(shí)際效果

先上代碼看如何實(shí)現(xiàn)

template 部分

 <el-tree
   :data="list.data"
   show-checkbox
   node-key="id"
   :props="defaultProps"
   :default-expand-all="list.isExpand"
   v-loading="list.loading"
   ref="tree"
   @check-change="checkChange">
 </el-tree>

js 部分

export default {
  data () {
    return {
      list: {
        data: [],
        loading: false,
        isExpand: true
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      loading:false
    }
  },
  methods: {
    defaultChecked () { // 默認(rèn)選中
      this.$nextTick(() => {
        const arr = []
        this.menus.forEach(item => {
          if (!this.$refs.tree.getNode(item.id).childNodes || !this.$refs.tree.getNode(item.id).childNodes.length) {
            arr.push(item.id)
          }
        })
        this.$refs.tree.setCheckedKeys(arr)
      })
    },
  }
}

解析：this.menus 是從后端獲取回來(lái)的數(shù)據(jù)，getNode() 獲取到當(dāng)前節(jié)點(diǎn)，判斷當(dāng)前節(jié)點(diǎn)是否是葉子節(jié)點(diǎn)，是的話存入 arr 數(shù)組中，最后使用 setCheckedKeys() 將數(shù)據(jù)回顯選中，從而實(shí)現(xiàn)父級(jí)的半選狀態(tài)

打印了一下Node 節(jié)點(diǎn)

以上就是解決el-tree數(shù)據(jù)回顯時(shí)子節(jié)點(diǎn)部分選中父節(jié)點(diǎn)都全選中的坑的詳細(xì)內(nèi)容，更多關(guān)于el-tree 數(shù)據(jù)回顯的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue路由跳轉(zhuǎn)的4種方式小結(jié)
本文主要介紹了Vue路由跳轉(zhuǎn)的4種方式小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題及解決
這篇文章主要介紹了vue動(dòng)態(tài)添加路由后刷新頁(yè)面白屏問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue 根據(jù)條件判斷van-tab的顯示方式
這篇文章主要介紹了Vue 根據(jù)條件判斷van-tab的顯示方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
element-ui中如何給el-table的某一行或某一列加樣式
本文主要介紹了element-ui中怎么給el-table的某一行或某一列加樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
vue關(guān)閉開(kāi)發(fā)模式提示的簡(jiǎn)單解決辦法
Vue開(kāi)發(fā)模式是一種基于Vue.js框架的開(kāi)發(fā)方式,它可以幫助開(kāi)發(fā)者更高效地構(gòu)建和維護(hù)復(fù)雜的Web應(yīng)用程序,下面這篇文章主要給大家介紹了關(guān)于vue關(guān)閉開(kāi)發(fā)模式提示的簡(jiǎn)單解決辦法,需要的朋友可以參考下
2024-04-04
通過(guò)vue寫(xiě)一個(gè)瀑布流插件代碼實(shí)例
這篇文章主要介紹了通過(guò)vue寫(xiě)一個(gè)瀑布流插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例
今天小編就為大家分享一篇vue.js的簡(jiǎn)單自動(dòng)求和計(jì)算實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
如何在vue中使用unocss以及基本使用方法
這篇文章主要給大家介紹了關(guān)于如何在vue中使用unocss以及基本使用方法的相關(guān)資料,unocss是一個(gè)即時(shí)的原子CSS引擎,它可以讓你用簡(jiǎn)短的類名來(lái)控制元素的樣式,而不需要寫(xiě)復(fù)雜的CSS代碼,需要的朋友可以參考下
2023-07-07
Vue slot插槽作用與原理深入講解
插槽slot可以說(shuō)在一個(gè)Vue項(xiàng)目里面處處都有它的身影，比如我們使用一些UI組件庫(kù)的時(shí)候，我們通?？梢允褂貌宀蹃?lái)自定義我們的內(nèi)容，這篇文章主要介紹了Vue3中slot插槽使用方式,需要的朋友可以參考下
2023-01-01
vue實(shí)現(xiàn)nav導(dǎo)航欄的方法
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目nav導(dǎo)航欄的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12