快捷導(dǎo)航

解決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)都全選中的坑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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ì)全選中，這很顯然不是我們需要的

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

我這里用 getNode() 的方法來簡(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 是從后端獲取回來的數(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.js遞歸組件構(gòu)建樹形菜單
這篇文章主要介紹了用Vue.js遞歸組件構(gòu)建一個(gè)可折疊的樹形菜單的教學(xué)內(nèi)容，有興趣的朋友跟著學(xué)習(xí)下。
2017-12-12
詳解Vue中使用Echarts的兩種方式
這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07
詳解vue幾種主動(dòng)刷新的方法總結(jié)
這篇文章主要介紹了詳解vue幾種主動(dòng)刷新的方法總結(jié)，文中詳細(xì)的介紹了幾種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-02-02
vue+elementUI實(shí)現(xiàn)分頁效果
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
vue3+elementplus基于el-table-v2封裝公用table組件詳細(xì)代碼
在日常開發(fā)后端管理系統(tǒng)項(xiàng)目中,用于展示數(shù)據(jù)多會(huì)用表格進(jìn)行展示,下面這篇文章主要給大家介紹了關(guān)于vue3+elementplus基于el-table-v2封裝公用table組件的相關(guān)資料,需要的朋友可以參考下
2023-12-12
Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例
為了防止有人惡意使用腳本進(jìn)行批量操作,會(huì)設(shè)置圖片滑動(dòng)驗(yàn)證，本文就介紹了Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例，感興趣的可以了解一下
2023-05-05
Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決
這篇文章主要介紹了Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
詳解vue樣式穿透的幾種方式
本文主要介紹了vue樣式穿透的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2023-07-07
Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解
本文主要介紹了Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-07-07