返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Element树形控件el-tree懒加载并设置默认展开和选中的效果
  • 219
分享到

Element树形控件el-tree懒加载并设置默认展开和选中的效果

Elementel-tree懒加载Elementel-tree展开选中 2023-01-04 12:01:51 219人浏览 泡泡鱼
摘要

使用elementui树组件,通过懒加载加载数据,并设置默认展开和全部选中的效果。 <el-tree :load="loadnode" node-key

使用elementui树组件,通过懒加载加载数据,并设置默认展开和全部选中的效果。

<el-tree
      :load="loadnode"
      node-key="org_id"
      is-connection-line
      show-checkbox
      lazy
      :default-checked-keys="defaultSelectCids"
      :default-expanded-keys="defaultExpandedCids"
      :props="defaultProps"
      @check-change="handleCheckChange"
      ref="orgTreeData"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span style="padding-left: 10px"> {{ data.in_service.count }} </span>
      </span>
    </el-tree>

主要设置load替换data属性。

还设置属性lazy,以及default-checked-keys和default-expanded-keys属性。并配置options的isLeaf属性。

dataTree = [];
  defaultProps = {
    children: 'child',
    label: 'org_name',
    isLeaf: data => {
      return !data.has_child;
    },
  };
  defaultExpandedCids = []; // 选出所有pid为0的 cid节点
  defaultSelectCids = []; // 选出所有cid
async loadNode(node, resolve) {
    if (!node.data) {
      const res = await this.getOrg(null);
      if (res && Array.isArray(res)) {
        res.forEach(item => {
          if (item.has_child && item.parent.id === 0) {
            this.defaultExpandedCids.push(item.org_id);
          }
          this.defaultSelectCids.push(item.org_id);
        });
      }
      resolve(res);
    } else {
      resolve(await this.getOrg(node.data.org_id));
    }
  }
  handleCheckChange(data, checked, indeterminate) {
    console.log(data, checked, indeterminate, this.$refs.orgTreeData.getCheckedKeys());
  }
  async getOrg(orgId) {
    
    this.orgTreeLoading = true;
    const {
      data: { tree_data = {} },
      error,
    } = await Http.api();
    if (!error) {
      this.orgTreeLoading = false;
      return new Promise(resolve => {
        resolve(tree_data);
      });
    }
  }

效果图如下

到此这篇关于Element树形控件el-tree懒加载并设置默认展开和选中的效果的文章就介绍到这了,更多相关Element el-tree懒加载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Element树形控件el-tree懒加载并设置默认展开和选中的效果

本文链接: https://lsjlt.com/news/176661.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作