使用el-tree控件懒加载和局部刷新

懒加载

按照 elementui官方文档示例,效果图

template部分,需要结合 lazy 和 load 一起使用

<el-tree
   show-checkbox
   node-key="id"
   lazy
   :load="loadNode"
   :props="defaultProps"
   v-loading="list.loading"
   ref="tree">
 </el-tree>

js 部分

export default {
  data () {
    return {
      list: {
        loading: false,
        isExpand: false
      },
      defaultProps: { // tree 控件的数据结构,需要设置 isLeaf
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      loading:false
    }
  },
  methods: {
    async loadNode(node, resolve) { // 懒加载
      if (node.level === 0) {
        return resolve(await this.getTagList())
      } else if (node.level === 1) {
        return resolve(await this.getTagApiList(node.label))
      } else {
        return resolve([]) // 防止该节点没有子节点时一直转圈的问题出现
      }
    },
    async getTagList () { // 获取所有接口所属模块 -> 第一层
      this.list.loading = true
      const res = await this.$API({
        name: 'getApiTagList',
        requireAuth: true
      })
      const tags = res.data.data
      tags.forEach((item, index) => { // 节点需要构建为 tree 的结构
        item.name = item.ta
        item.id = index
        item.leaf = false
      })
      this.list.loading = false
      return tags
    },
    async getTagApiList (tag) { // 查询模块下的接口列表 -> 第二层 
      const res = await this.$API({
        name: 'getTagApiList',
        data: {
          tag
        },
        requireAuth: true
      })
      const results = res.data.data
      results.forEach(item => {
        item.name
        item.id
        item.leaf = true
      })
      return results
    },
  }
}

局部刷新

想要实现的效果是,新增节点,点击确定后局部刷新,渲染新数据

效果图

关键代码

<el-tree
  node-key="id"
  lazy
  :load="loadNode"
  :props="defaultProps"
  :expand-on-click-node="false"
  :check-on-click-node="true"
  v-loading="list.loading"
  @node-click="nodeClick"
  ref="tree">
</el-tree>
// 点击节点,把 node 保存下来,供局部刷新中的 node 使用
nodeClick (data, node) {
  this.curPath = data.path
  this.curNode = node
},
// 实现局部刷新,在点击弹窗处调用的
partialRefreshpartialRefresh (node) {
  node.loaded = false // 设置loaded为false;模拟一次节点展开事件,加载重命名后的新数据;
  node.expand() // 新建子节点是刷新一次本节点的展开请求,而重命名和删除则需要刷新父级节点的的展开事件,可以设置node.parent.loaded = false;node.parent.expand();
}

element-ui el-tree lazy懒加载局部刷新的问题

在项目开发中,使用el-tree  进行懒加载的时候,如果遇到需要进行添加 删除操作的时候,整体刷新数据体验会很不好,所以需要局部进行刷新, 

我们可以通过找到树节点的形式,对当前展开的节点进行重新打开请求一次,以此来获取最新数据

 <el-tree
    lazy  
    ref="tree"
    :load="loadNode"
    :node-key="id"    
  >
 </el-tree>
methods: {
         refreshNodeBy(id){
             let node = this.$refs.tree.getNode(id); // 通过节点id找到对应树节点对象
             node.loaded = false;
             node.expand(); // 主动调用展开节点方法,重新查询该节点下的所有子节点
         }
     }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持Devmax。  

elementui中使用el-tree控件懒加载和局部刷新的更多相关文章

  1. swift实现懒加载

    在swift中使用lazy描述符号可以实现属性的懒加载

  2. swift lazy 懒加载

    我们在使用lazy作为属性修饰符时,只能声明属性是变量。另外我们需要显式地指定属性类型,并使用一个可以对这个属性进行赋值的语句来在首次访问属性时运行。

  3. Swift中闭包,懒加载,单例的写法区别

    闭包闭包的参数和返回值都写在大括号里面,以”in”分隔开闭包内的代码块,如果闭包的参数和返回值都为空的话,”()->()in”就可以省略,下面是几种常见的闭包写法:最简单的闭包:有参数的闭包声明方法:方式1方式2,最外层括号可以前移到闭包名后面方式3懒加载:在Swift中,懒加载本质就是一个闭包,在前面加上lazy关键字,在需要这个属性的时候,会执行后面的闭包,并且把闭包的返回值记录下来,下次再次

  4. Swift- lazy 懒加载

  5. swift学习日志—— lazy懒加载

    在其他语言中懒加载的情况是很常见的。在Swift中我们使用在变量属性前加lazy关键字的方式来简单地指定延时加载。相比起在Objective-C中的实现方法,现在的lazy使用起来要方便得多。另外一个不太引起注意的是,在Swift的标准库中,我们还有一组lazy方法,它们的定义是这样的:这些方法可以配合像map或是filter这类接受闭包并进行运行的方法一起,让整个行为变成延时进行的。

  6. 从零学习Swift&lt;6&gt;

    构造函数convenience便利构造函数默认情况下,所有的构造方法都是指定构造函数Designatedconvenience关键字修饰的构造方法就是便利构造函数便利构造函数具有以下特点:可以返回nil只有便利构造函数中可以调用self.init()便利构造函数不能被重写或者super便利构造函数应用场景根据给定参数判断是否创建对象,而不像指定构造函数那样必须要实例化一个对象出来在实际开发中,可以

  7. Swift构造函数

    1.构造函数:给属性开辟内存空间给属性设置初始值最终目标创建一个对象用init构造函数参数有可能不同//定义属性使用var是我们开发需要的varname:String//可选属性-默认等于nil可以不需要在构造函数里进行初始化title属性没有分配内存空间在其他地方设置值的时候才需要分配内存空间vartitle:String?

  8. swift - lazy load

    swift中懒加载必须使用var关键字来定义延迟加载的属性,不能使用let关键字,因为常量必须在实例构建时赋值。懒加载常见格式:后面通过等号赋值一个闭包,闭包后面必须跟上(),如果闭包是用于懒加载,那么in之前的代码都可以省略,包括in在内比如也可以通过函数形式进行懒加载,比如

  9. swift之UITableView的使用

    下面我们一步一步从0开始写一个tableView。注意:1.协议的写法,不需要写。意思就是把什么当作什么,在上面的代码中,由于方法dequeueReusableCellWithIdentifier的返回值是AnyObject,所以需要通过as告诉编译器这实际上是一个UITableViewCell。也是一样的道理。

  10. swift编程语言简单开发二维码扫描

    )类型8.do{9.letinput=tryAVCaptureDeviceInput10.returninput11.}catch{12.print13.returnnil14.}15.}()16.//创建会话/输出比较简单只需要创建一个对象17.privatelazyvarsession:AVCaptureSession=AVCaptureSession()18.//创建输出设备19.privatelazyvardeviceOutput:AVCaptureMetadataOutput=AVCapture

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部