element-tree异步请求，局部刷新

最新推荐文章于 2024-12-08 15:05:03 发布

shuaijie0518

最新推荐文章于 2024-12-08 15:05:03 发布

阅读量1k

点赞数 1

分类专栏： element 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/taoqidexiaojie/article/details/127382749

版权

element 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

需求：页面左侧是一个单位树（异步加载），右侧是单位下子单位table表格数据

右侧进行完增删改查之后树与table都要进行刷新

1. 先写一个异步请求的树

      <el-tree
        ref="companyTree"
        v-loading="treeLoading"
        :props="companyTreeProps"
        :load="loadNode"
        lazy
        accordion
        :expand-on-click-node="false"
        node-key="ID"
        highlight-current
        @node-click="handleNodeClick">
      </el-tree>

2.写data数据

      companyTreeProps: {
        label: 'NAME',
        children: 'childNodes',
        isLeaf: 'LEAF'
      },

3. 写异步方法，得到树数据

    loadNode(node, resolve) {
      if (node.level === 0) {
        const params = {
          parentId: '0'
        }
        //请求树的根数据
        initTreeData(params).then(res => {
          //调用点击node事件。则一渲染table就又数据
          this.handleNodeClick(res.data.data[0])
          return resolve(res.data.data);
        })
      }else {
        if (node.data.leaf !== '1') {
          //当不是叶子结点时，继续请求
          var childrenData = []
          const params = {
            parentId: node.data.ID
          }
          initTreeData(params).then(res => {
            childrenData = res.data.data
            return resolve(childrenData)
          })
        } else {
          return resolve([]);
        }
      }
    },

4. 写异步刷新（node-key="ID" ref="companyTree"）

    refreshNodeBy(id){
      let node = this.$refs.companyTree.getNode(id); // 通过节点id找到对应树节点对象
      node.loaded = false;
      node.expand(); // 主动调用展开节点方法，重新查询该节点下的所有子节点
    },