vue elementUi tree 懒加载使用详情

Posted hfultrastrong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue elementUi tree 懒加载使用详情相关的知识,希望对你有一定的参考价值。

vue elementUi tree 懒加载使用详情

背景:

vue下使用elementUI

文档:

http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian

需求:

只保存二级节点中选中的数据;不保存一级节点选中的数据。

效果:

技术图片

数据来源:

后台提供两个接口分别用于取第一级节点和第二级节点的数据;

思路:

点击标签列表时,触发selectLabelList获取第一级节点的数据触发lodeNode进行填充,展开一级节点;点击任一一级节点的下拉箭头通过loadNode的node.level==1获取二级节点进行填充。每次选择都会触发handleCheckChange获取选中或删除弃选的内容;最终将用户选中的所有二级数据保存到labelCheckedList这个数组中。

注意点:

 node-key、ref、lazy这3个属性一定要有
 一级节点传递给二级节点的值是用node.data里面的id即node.data.id而不是用官网案例上的node.id(被坑过)
  • 1
  • 2

实战:

html:

<el-button  @click="selectLabelList">标签列表</el-button>
<el-tree
    node-key="id"
    ref="tree"
    highlight-current
    :props="props"
    :load="loadNode"
    lazy=""
    show-checkbox
    @check-change="handleCheckChange">
</el-tree>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

js:这是核心的部分代码,并不是所有,有的字段还没有定义。

data() {
    return {
      labelCheckedList:[],
      props: {
          label: ‘name‘,
          children: ‘zones‘,
        }}
// labelCheckedList接收被勾选的数据
handleCheckChange(data){
      this.currTreeId=data.id
        setTimeout(() => {
          let currtData = this.$refs.tree.getCheckedNodes(true)
          this.labelCheckedList = currtData;
        }, 100);
    },
//懒加载时触发
loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve(this.categorylist);
      }
      if (node.level > 1) return resolve([]);
      if(node.level === 1) { // 二级节点
        this.getChildrenNode(node,resolve)
      }
    },
// 二级节点
getChildrenNode(node,resolve) {
      let categoryId = node.data.id;
      this.$http.post(‘/api/getLabelListByCategoryId‘, {
          categoryId:categoryId
        },
        {
            emulateJSON: true,
            emulateHTTP: true
        }).then(res => {
          this.childrenList = res.body;
          if(this.childrenList.length==0){
            this.$message.error(‘数据拉取失败,请刷新再试!‘);
            return;
          }
          resolve(this.childrenList);
        });
    },
// 收起、展示tree
selectLabelList() {
      if(!this.isShowTree){
          this.getCategorylist();
      }else{
        this.$refs.tree.$data.store.lazy = false
        this.isShowTree=false;
      }

    },
//获取一级节点
getCategorylist(){
      this.$http.post(‘/api/categorylist‘, {
            searchInfo: this.searchLabelInfo,
          }).then(res => {
            let data = res.body.data.list;
            if(data.length > 0){
              data.forEach(item => {
                item.disabled= true;
              })
            }
            this.categorylist = data;
            this.isShowTree=true;
          })
    },

以上是关于vue elementUi tree 懒加载使用详情的主要内容,如果未能解决你的问题,请参考以下文章

笔耕不辍 elementUI el-tree实现懒加载和直接查询实现

elementui tree懒加载刷新问题

VUE项目实战65配置路由懒加载

VUE项目实战65配置路由懒加载

VUE项目实战65配置路由懒加载

关于Element UI tree组件 懒加载的更新操作