首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue element tree懒加载

vue+element tree懒加载更新数据的示例代码

2022-09-23 17:07:12 作者：敲代码的小姑娘·

这篇文章主要介绍了vue+element tree懒加载更新数据,文中给大家补充介绍了Vue Element Ui 树形表懒加载新增、修改、删除等操作后局部数据更新的详细代码，感兴趣的朋友跟随小编一起看看吧

使用element tree实现懒加载，更新某一节点的数据

1.tree 懒加载

只需要在el-tree标签上面添加lazy，load属性，load的接收是一个函数。这里贴上官网给出的方法

在这里插入图片描述

<el-tree
   :data="treeList"
   ref="tree"
   class="vue-tree"
   lazy
   :load="loadNode"
   :highlight-current="true"
   :node-key="nodeKey"
   @node-click="nodeClick"
   :expand-on-click-node="false"
   :props="defaultProps"
 ></el-tree>

2.load方法使用

// 懒加载获取树形结构
loadNode(node, resolve) {
//调用接口时，我们的需求是第一级传参为0，后面为当前节点的唯一表示id，可以根据需求而定
// node.level为0时，就是tree的第一级
 const spaceParentGuid = node.level === 0 ? 0 : node.data.spaceGuid
 getDeviceLazyTree({ spaceParentGuid }).then(({ data }) => {
   resolve(
     data.data.map(item => {
       return {
         ...item,
         leaf: !item.hasChildren // 此参数用来判断当前节点是否为叶子节点
       }
     })
   )
 })
},

3.leaf的作用

当我们使用的tree懒加载，只会加载到我们请求的那一层级，所以当我们在叶子节点请求时，请求完不会出现数据，这样的体验就不是很好，这个时候就需要借助tree的props里面isLeaf的配置方法了

在这里插入图片描述

defaultProps: {
  children: 'children',
  label: 'spaceName',
  isLeaf: 'leaf'
}

加上此字段，就可以清晰的看出哪些节点为叶子节点了

4.我们一旦使用懒加载的方式的话

那我们在对tree接口进行增删改查时，及时刷新数据时，就会造成我们还需要从新获取接口

其实如果我们仔细观察的话，我们会发现已经请求过的节点，我们收起，再次打开是不会请求接口的，这样的话，我们可以这么做

/**
 * 单独刷新节点
 * guid: 当前节点的父级唯一标识节点
 */
refreshTreeNode(guid) {
  let node = this.$refs.tree.getNode(guid)
  if (node) {
    node.loaded = false
    node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
  }
},

Vue Element Ui 树形表懒加载新增、修改、删除等操作后局部数据更新

前言

element 树表懒加载在每次对表格进行修改删除等操作后需要刷新表格数据时都需要重新请求，在逐增展开加载，这样对用户来说不太友好所以我们稍微解决一些

第一步：定义一个Map

用来储存表格懒加载每次展开时所点击的当前行{tree,treeNode,resolve}

data(){
    return{
        maps: new Map(), // 先在你的data内搞一个map用于存储接下来必要的数据
    }
}

第二步：在load方法内使用map

每次点击展开load方法都会返回{tree,treeNode,resolve}，定义好map后在每一次执行load方法调用接口成功返回数据后将load返回的参数{tree,treeNode,resolve}储存到map中去，用于后续操作中使用

   load(tree, treeNode, resolve) {
      if (treeNode) {
         // 这是我的方法和接口不必照搬只需要将this.maps.set()这一句放到相应位置即可
        selectBom({
          code: tree.code,
          ifMba: this.ifMba,
        }).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
            this.maps.set(tree.code, { tree, treeNode, resolve }); 
            // 上面这一句是将你每一次展开的节点存到你刚刚在data内定义的map内，其他的不重要
            // tree.code是唯一值
          }
        });
      }
    },

第三步：查询map中对应数据

已经将每次展开load返回的{tree,treeNode,resolve}存储到map中后，我们现在就需要取出来再传给load方法了，调用refreshLoadTree方法时需要给它传一个你所操作节点父节点ID，他会通过这个ID去map中检索出相对应的数据然后再调用load方法传给它以达到局部更新的目的

    refreshLoadTree(pId) {
      // 根据更改节点的父ID取出相应数据
      const { tree, treeNode, resolve } = this.maps.get(pId);
       
      this.$set(
        // 不要忘记在你的table上写ref
        this.$refs.LoadTable.store.states.lazyTreeNodeMap, 
        pId,
        []
      );
      if (tree) {
        // 将取出对应数据再传给load方法
        this.load(tree, treeNode, resolve); 
      }
    },

第四步：调用 refreshLoadTree方法

只需要在你修改或删除等操作接口返回成功时调用并传一个操作节点父ID即可实现局部数据更新

//最后只需要在你做修改删除或者其他操作的地方调用即可
//括号内传操作节点的父节点（如果自己拿不到可以在接口成功时让后端返回）
this.refreshLoadTree(res.data.code);

这是基础版本，因为本人项目原因会再次之上改动许多并未附上全部（仅作为记录）

到此这篇关于vue+element tree懒加载更新数据的文章就介绍到这了,更多相关vue element tree懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！