zoukankan      html  css  js  c++  java
  • 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;
              })
        },
  • 相关阅读:
    oracleI基础入门(6)sql语句Substring Crazy
    oracleI基础入门(7)table约束 Crazy
    oracleI基础入门(7)table视图 Crazy
    SQL附加分离数据库(命令)
    双截棍 C语言版 (超搞笑)
    AspNetPage分页(repeater),自己做的例子基本代码
    记录
    RegularExpressionValidator控件中正则表达式用法
    20 个经典的 Ajax + CSS 表格
    GridView各个事件中,怎样获取主键值
  • 原文地址:https://www.cnblogs.com/hfultrastrong/p/10935793.html
Copyright © 2011-2022 走看看