zoukankan      html  css  js  c++  java
  • ElementUI tree异步树(懒加载)节点新增删除编辑时实现局部刷新

    最近弄一个项目,因为树形数据量较大,必须要一层层加载数据。所以采取了树形懒加载方式,但是element官方文档并未找到可直接提供刷新某个树节点的方法,那我直接对某一个子节点进行数据操作总不能整个tree刷新数据吧,这样子体验和操作数据极不方便。

              <el-tree :highlight-current="true" node-key="StandardID" ref="tree"  :load="loadNode" lazy :props="defaultProps" @node-click="handleNodeClick">
                <span slot-scope="{ node }">
                    {{ node.label }}
                </span>
              </el-tree>

    局部刷新:

    async loadNode(node, resolve) {
         //加载数据的方法里把node,reslove存起来
          this.node = node;
          this.resolve = resolve;
          this.node.childNodes = [];
    
     //获取数据
    if (node.level === 0) {
      const listTable = await this.getList(0) // 获取主表数据
      return resolve(listTable)
    } else {
      const listData = await this.getList(node.level, node.data.StandardID)
      return resolve(listData)
    }
    }

    手动刷新方法调用

    this.loadNode(this.node, this.resolve)

    以上方法对某节点新增时数据时局部数据刷新是没问题的,但是对节点某条数据编辑删除时仍是没效果(可能是本人get不到点)。以下是最终采取的解决方案,找到对应的树节点,使用expand方法:

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

    手动局部刷新,调用refreshNodeBy(默认是刷新当前节点下的数据,所以新增时取当前节点id,编辑时取当前节点的父级id,当编辑顶级节点时注意其父级id是没有的,加个判断即可)

    //树形新增编辑删除操作刷新
    Refresh_standar(data) {
    let id_=data==='add'?this.currentData.StandardID:this.EditStandard.SupID
    this.refreshNodeBy(id_)      
    }

    测试几次,没发现问题,可行

    参考:https://www.cnblogs.com/heyefengyin/p/11430073.html

  • 相关阅读:
    模拟63 题解
    MYSQL:python 3.x连接数据库的方式
    MYSQL: Starting MySQL….. ERROR! The server quit without updating PID file解决办法
    MYSQL:数据库安装 windows
    Python线程:线程的调度-守护线程
    Visulalization Voronoi in OpenSceneGraph
    Plant Design Review Based on AnyCAD
    Change Line Type in OpenCascade
    Topology and Geometry in OpenCascade-Adapters
    Conversion Operators in OpenCascade
  • 原文地址:https://www.cnblogs.com/lwming/p/13969513.html
Copyright © 2011-2022 走看看