vue elementUi tree 懒加载使用详情

太过爱你忘了你带给我的痛 2022-04-15 03:53 536阅读 0赞

## 背景： ##

vue下使用elementUI

## 文档： ##

[http://element-cn.eleme.io/\#/zh-CN/component/tree\#tree-shu-xing-kong-jian][http_element-cn.eleme.io_zh-CN_component_tree_tree-shu-xing-kong-jian]

## 需求： ##

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

## 效果： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]

## 数据来源： ##

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

## 思路： ##

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

## 注意点： ##

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

## 实战： ##

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>

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;
              })
        },

[http_element-cn.eleme.io_zh-CN_component_tree_tree-shu-xing-kong-jian]: http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]: /images/20220415/511bf5584ab1407e8a45b5ecffd1bcf5.png