element tree懒加载局部刷新

一、在 el-tree 标签，写入

node-key="id"
ref="asyncTree"

二、在 懒加载的 load 绑定的事件中，首级需要把 node 存储起来

1、 getData是请求数据方法

 loadNode (node, resolve) {
         if (node.data && node.data.id) {
          this.getData(node.data.id, resolve)
        } else if (node.level === 0) {
          this.node_had = node
          this.getData(null, resolve)
        }
      },

三、 根据 id 局部树形

1、 node_had 是上一步存储的一级 node

 reloadFn (id) {
        if (id) {
          const node = this.$refs.asyncTree.getNode(id)
          if (node) {
            node.loaded = false
            node.expand()
          }
        } else {
          this.node_had.loaded = false
          this.node_had.expand()
        }
      },

四、局部禁止刷新

his.$refs.asyncTree.remove(data.id)删除局部刷新

五、完整代码

        

<template>
    <el-tree
        node-key="id"
        ref="asyncTree"
        class="listBox"
        :props="props"
        :load="loadNode"
        :render-content="renderContent"
        lazy>
      </el-tree>
</template>

<script>

 data () {
      return {
        props: {
          label: 'id',
          children: 'children'
        },
        node_had: null
      }
    },

 methods: {
      /* 局部重新加载 */
      reloadFn (id) {
        if (id) {
          const node = this.$refs.asyncTree.getNode(id)
          if (node) {
            node.loaded = false
            node.expand()
          }
        } else {
          this.node_had.loaded = false
          this.node_had.expand()
        }
      },
      loadNode (node, resolve) {
        if (node.data && node.data.id) {
          this.getData(node.data.id, resolve)
        } else if (node.level === 0) {
          this.node_had = node
          this.getData(null, resolve)
        }
      },
      getData (id, resolve) {
        this.$api.fn(id).then(res => {
          if (res.code === 200) {
            const dataList = res.data
            if (resolve) {
              resolve(dataList)
            }
          }
        })
      }

 }

</script>