zoukankan      html  css  js  c++  java
  • 基于vue的element树形组件

    最近项目使用到了异步树,异步树的存在是解决树型结构下数据过多的问题而诞生的,即点一次加载一次

    多选异步树

    html

    <el-tree
            ref="tree"
            :props="props"
            node-key="userIndexCode"
            :load="loadNode"
            :highlight-current="false"
            lazy
            show-checkbox
            @check-change="handleCheckChange">
          </el-tree>
    

    props配置选项
    node-key每个树节点用来作为唯一标识的属性
    :load加载子树数据的方法
    :highlight-current是否高亮当前选中节点
    @check-change节点选中状态发生变化时的回调

    一般说来,有上面几个方法和参数就足够构造树了

    JS

    loadNode (node, resolve) {
          // 判断是否根节点
          if (node.level === 0) {
            API.getTree({ id: '-1' }).then((res) => {
              // 发送请求返回结果
              // 解析成标准的data结构
              resolve(data)
            })
          } else {
            API.getTree({ id: node.data.id }).then((res) => {
              // 发送请求返回结果
              // 解析成标准的data结构
              // 这里的树如果有部门和人员,需要在props里面加上 isLeaf: 'leaf' 本例中obj是节点,userobj是叶子节点
              // 构造数组的时候 叶子节点 也需要加上leaf:true
              resolve(obj.concat(userobj))
            })
          }
        }
    

    this.$refs.tree.getCheckedNodes()方法使用的坑

    在实际使用中,发现如果节点下面有内容的话,this.$refs.tree.getCheckedNodes可以正常使用
    但是如果节点下面无内容而且选中的话,this.$refs.tree.getCheckedNodes(true,true)会把节点也计算在内
    针对这个组件问题,使用leaf是否是叶子节点来过滤一次就可以了

    this.$refs.tree.getCheckedNodes(true, true).map((value) => {
            if (value.leaf) {
              this.checkList.push(value)
            }
          })
    
  • 相关阅读:
    【理财启蒙】理财:需要树立正确的金钱观
    【系统设计】分布式唯一ID生成方案总结
    【Hash一致性算法】什么是Hash一致性算法
    【位图算法】什么是BitMap
    关于枚举类你可能不知道的事
    【数据结构】什么是AVL树
    mysql5.6 主从同步配置
    vmstat命令详解
    pstack跟踪进程栈
    iostat 磁盘io分析工具
  • 原文地址:https://www.cnblogs.com/johu/p/13691204.html
Copyright © 2011-2022 走看看