element tree懒加载局部刷新

最新推荐文章于 2024-09-05 20:14:47 发布

996 前端小伙子

最新推荐文章于 2024-09-05 20:14:47 发布

阅读量1.3k

点赞数

分类专栏： element vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_41854372/article/details/121563645

版权

vue 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

element

3 篇文章 0 订阅

订阅专栏

一、在 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>