本來(lái)是不太想動(dòng)的...

無(wú)可奈何，看到一句話【業(yè)精于勤, 荒于嬉】便還是動(dòng)手寫(xiě)一寫(xiě)加深理解的同時(shí)給以后的自己留個(gè)備份吧...

element-ui Tree組件如何給具有懶加載的tree設(shè)置半選效果？這也是讓我很頭疼的一個(gè)問(wèn)題...

因?yàn)閿?shù)據(jù)不是一口氣都請(qǐng)求回來(lái)的，故而當(dāng)你進(jìn)入頁(yè)面的時(shí)候，你有的數(shù)據(jù)只是你能看到的第一層節(jié)點(diǎn)，但是由于某種情況需要做數(shù)據(jù)的回顯，這就會(huì)產(chǎn)生問(wèn)題了。

當(dāng)然，如果數(shù)據(jù)不是很多的情況下自然可以獲取全部的數(shù)據(jù)，然后給tree設(shè)置上默認(rèn)選中的節(jié)點(diǎn)，這個(gè)問(wèn)題自然也就不存在了。

但，若是數(shù)據(jù)量龐大且級(jí)數(shù)很深的情況下，一般接口都會(huì)根據(jù)前端傳給后端的標(biāo)識(shí)來(lái)返回某層數(shù)據(jù)，這樣就會(huì)產(chǎn)生一個(gè)問(wèn)題：

【當(dāng)你設(shè)置了默認(rèn)選中的子節(jié)點(diǎn)，但是由于剛進(jìn)入頁(yè)面此時(shí)tree中數(shù)據(jù)暫是沒(méi)有這個(gè)子節(jié)點(diǎn)時(shí)，其父節(jié)點(diǎn)并不會(huì)具有半選效果】如下圖所示:

我還是一如既往粗魯?shù)恼叶饶镌儐?wèn)了一番，沒(méi)有找到想要的結(jié)果...

直到我在element-ui的git上翻尋前人智慧時(shí)，遇到了Ta...

這個(gè)大哥給了一個(gè)非常棒的想法，并且成功了讓心猿意馬的我眼前一亮【原來(lái)還可以這般巧妙的使用對(duì)象的引用？！】

好了，廢話不多說(shuō)了，先看下使用前的代碼吧：

（當(dāng)然下面使用到的這幾個(gè)屬性在官網(wǎng)都有，哪個(gè)不懂的看下文檔就行了）

<template>
    <div class="lazy-tree">
        <h2>展示：</h2>
        <el-tree
        :props="props"
        :load="loadNode"
        lazy
        node-key="id"
        :default-checked-keys="[1001]"
        show-checkbox>
        </el-tree>
    </div>
</template>

<script>
export default {
  data () {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    // 動(dòng)態(tài)獲取葉子節(jié)點(diǎn)的方法
    loadNode (node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region', id: 1000 }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [{
          id: 1001,
          name: 'leaf',
          leaf: true
        }, {
          name: 'zone'
        }]

        resolve(data)
      }, 500)
    }
  }
}
</script>

<style>
.lazy-tree{
    padding: 20px;
     500px;
    height: 500px;
    background-color: #70E2FA;
}
</style>

然后這里是使用后的代碼：

（這里我多加了一些方法用于模仿請(qǐng)求接口啥的都不是重點(diǎn)關(guān)注的...核心內(nèi)容還是這個(gè)setHalfCheckedNodes (key) ）

<template>
    <div class="lazy-tree">
        <h2>展示：</h2>
        <el-tree
        ref="lazyTree"
        :props="props"
        :load="loadNode"
        lazy
        node-key="id"
        :default-checked-keys="defaultCheckedKeys"
        show-checkbox>
        </el-tree>
    </div>
</template>

<script>
export default {
  data () {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      // 默認(rèn)選中的節(jié)點(diǎn)
      defaultCheckedKeys: []
    }
  },
  mounted () {
    this.getDetails()
  },
  methods: {
    // 動(dòng)態(tài)獲取葉子節(jié)點(diǎn)的方法
    loadNode (node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region', id: 1000 }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [
          {
            id: 1001,
            name: 'leaf',
            leaf: true
          },
          {
            id: 1002,
            name: 'zone',
            leaf: true
          }
        ]

        resolve(data)
      }, 500)
    },
    // 模擬的詳情接口
    detail () {
      return new Promise((resolve, reject) => {
        const data = [{ id: 1001, name: 'leaf', parent: 1000 }]
        resolve(data)
      })
    },
    // 獲取回顯數(shù)據(jù)
    async getDetails () {
      const res = await this.detail()
      res.forEach(item => {
        this.defaultCheckedKeys.push(item.id) // 此處應(yīng)有去重
        this.setHalfCheckedNodes(item.parent)
      })
    },
    // 設(shè)置半選狀態(tài)
    setHalfCheckedNodes (key) {
      const node = this.$refs['lazyTree'].getNode(key)
      if (node) { // 此處應(yīng)判斷當(dāng)前節(jié)點(diǎn)的checked屬性是否為true，是則不必半選
        node.indeterminate = true
      }
    }
  }
}
</script>

<style>
.lazy-tree{
    padding: 20px;
     500px;
    height: 500px;
    background-color: #70E2FA;
}
</style>

總結(jié)：

這里我只是輕描淡寫(xiě)的用2層的tree大致講述了如何設(shè)置設(shè)置半選狀態(tài)。

但，即使是更深的tree也還是萬(wàn)變不離其宗，用的還是這個(gè)方法，只不過(guò)判斷第二層是否需要設(shè)置半選的時(shí)候需要再給第一層再設(shè)置下半選。

因?yàn)椋谀阏归_(kāi)第二層tree的時(shí)候，如果【選中】狀態(tài)的葉子節(jié)點(diǎn)在第三層，由于此時(shí)tree上還沒(méi)有第三層的數(shù)據(jù)，

所以組件自動(dòng)計(jì)算發(fā)現(xiàn)沒(méi)有需要有半選和全選的按鈕，就會(huì)清空你設(shè)置好的半選狀態(tài)。

另外，在setHalfCheckedNodes 中我說(shuō)的需要判斷當(dāng)前node的isChecked指的就是下圖中的【節(jié)點(diǎn)本身是否被選中】

總結(jié)

以上是生活随笔為你收集整理的element-ui Tree之懒加载叶子节点设置半选效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。