欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決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ì)，對大家的學(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() 的方法來簡單解決

預(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)父級的半選狀態(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ù)回顯的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • Vue.js遞歸組件構(gòu)建樹形菜單

    Vue.js遞歸組件構(gòu)建樹形菜單

    這篇文章主要介紹了用Vue.js遞歸組件構(gòu)建一個(gè)可折疊的樹形菜單的教學(xué)內(nèi)容，有興趣的朋友跟著學(xué)習(xí)下。
    2017-12-12
  • 詳解Vue中使用Echarts的兩種方式

    詳解Vue中使用Echarts的兩種方式

    這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2018-07-07
  • 詳解vue幾種主動(dòng)刷新的方法總結(jié)

    詳解vue幾種主動(dòng)刷新的方法總結(jié)

    這篇文章主要介紹了詳解vue幾種主動(dòng)刷新的方法總結(jié)，文中詳細(xì)的介紹了幾種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-02-02
  • vue+elementUI實(shí)現(xiàn)分頁效果

    vue+elementUI實(shí)現(xiàn)分頁效果

    這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue3+elementplus基于el-table-v2封裝公用table組件詳細(xì)代碼

    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)示例

    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ò)解決

    這篇文章主要介紹了Vue3之Vite中由element?ui更新導(dǎo)致的啟動(dòng)報(bào)錯(cuò)解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • 詳解vue樣式穿透的幾種方式

    詳解vue樣式穿透的幾種方式

    本文主要介紹了vue樣式穿透的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片

    vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片

    這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用攝像頭實(shí)現(xiàn)拍照上傳圖片、本地上傳圖片的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2023-07-07
  • Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解

    Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解

    本文主要介紹了Vue3和Electron實(shí)現(xiàn)桌面端應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-07-07

最新評論