vue3组件elementPlus组件改三层树形穿梭框

 

1.树形结构懒加载情况下默认展开指定层级

可以通过

：node-key="chapterInfoId"
  :default-expanded-keys="defaultExpandedCids"

来实现。

实现逻辑及注意事项：

1. props规范的是data中数据的key值，例如defaultProps中设置label展示的是key值设定为chapterTitle，那么就会将data333中key值为chapterTitle的值作为展示

2. node-key 绑定的是数据中能够唯一标识数据的key值。

3. default-expanded-keys 绑定的是默认展开的结点id集合。需要注意的是如果是懒加载为前提的话，展开的是第五层级的节点，那么需要将第五层级的结点之前的父亲节点都需要放进这个集合中。如果这个集合中只放入一个第五层级的结点，那么这个树形结构都不会进行默认展开的

<template>
  <el-tree
     ref="tree"
     :data="data333"
     :highlight-current="true"
     node-key="chapterInfoId"
     lazy
     :default-expanded-keys="defaultExpandedCids"
     :props="defaultProps"
     :load="loadNode"
     />

</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        defaultExpandedCids: [13123,19467,131,1312],
        defaultProps: {
          children: 'children',
          label: 'chapterTitle',
          id: 'chapterInfoId',
          isLeaf: false// 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
        },
        data333: [
          {
            chapterInfoId: 19428,
            chapterTitle: '第十一章',
            children: [
              {
                chapterInfoId: 111,
                chapterTitle: '11.1',
                children: []
              }
            ]
            
          },
          {
            chapterInfoId: 19451,
            chapterTitle: '第十二章',
            children: [
              {
                chapterInfoId: 121,
                chapterTitle: '12.1',
                children: []
              }
            ]
          },
          {
            chapterInfoId: 19467,
            chapterTitle: '第十三章',
            children: [
              {
                chapterInfoId: 131,
                chapterTitle: '13.1',
                children: [
                  {
                    chapterInfoId: 1312,
                    chapterTitle: '13.1.2',
                    children: [
                      {
                        chapterInfoId: 13123,
                        chapterTitle: '13.1.2.3',
                        children: []
                      },
                    ]
                    
                  },
                ]
                
              },
            ]
            
          },
        ],
      }
    },
    created() {
      
    },
    mounted() {
      
    },
    methods: {
      loadNode(node, resolve) {
        console.log(node)
        if (node.level == 0) {//默认加载第1层.
          return resolve(this.data333);
        }
        else{
            return resolve(node.data.children);
        } 
    }
  }
</script>

<style scoped>
</style>

 2.树形结构懒加载情况下默认展开指定层级后 其他节点按照懒加载的方式进行

实现原理讲解：

这里的数据默认展开load方法是在creat方法中就已经执行完毕了。所以我们在vue的声明周期create之后的mounted里面对this.clickNum的值进行了修改。那么用户在界面点击树形结构的时候默认执行我们自定义的懒加载的方法。

原先错误的想法：

在nodeclick事件中对设置的变量进行加一，这样通过判断变量的值来执行不同的加载方法。但是实践起来发现nocdClick方法是在load方法之后的。所以这个想法是错误的。

<template>
  <el-tree
    ref="tree"
    :data="defaultdata"
    :highlight-current="true"
    node-key="chapterInfo_id"
    lazy
    :default-expanded-keys="defaultExpandedCids"
    :props="defaultProps"
    :load="loadNode"
  />
</template>

<script>
import { getChapterInfo } from "@/api/lazyTree.js";
import { showMessage } from "../utils/showMessage";

export default {
  name: "",
  components: {},
  data() {
    return {
      defaultExpandedCids: [19124, 19186],
      defaultProps: {
        children: "children",
        label: "chapter_title",
        id: "chapterInfo_id",
        isLeaf: false, // 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
      },
      clickNum: 0,
      defaultdata: [],
    };
  },
  created() {
    //获取初始的数据进行
    this.getdefaultInfo(0);
  },
  mounted() {
    this.clickNum = 1;
  },
  methods: {
    loadNode(node, resolve) {
      if (this.clickNum == 0) {
      // 走数据默认展开事件
        if (node.level == 0) {
          //默认加载第1层.
          return resolve(this.defaultdata);
        } else {
          return resolve(node.data.children);
        }
      } else {
         // 调用接口走懒加载事件
        this.getInfo(node, resolve, node.data.chapterInfo_id);
      
        console.log("懒加载事件");
      }
    },

   //树形结构懒加载方法
    getInfo(node, resolve, chapterInfoId) {
      getChapterInfo(
        localStorage.getItem("courseId"),
        localStorage.getItem("classId"),
        chapterInfoId
      ).then((res) => {
        if (res.code == "0000") {
          return resolve(res.data.data);
        } else {
          showMessage("warning", "子章节信息加载失败");
          return resolve(res.data.data);
        }
      });
    },
    //获取默认展开数据
    getdefaultInfo(chapterInfoId) {
      getChapterInfo(
        localStorage.getItem("courseId"),
        localStorage.getItem("classId"),
        chapterInfoId
      ).then((res) => {
        if (res.code == "0000") {
          this.defaultdata = res.data.data;
          this.defaultExpandedCids = res.data.defaultPoint;
        } else {
          showMessage("warning", "章节信息加载失败");
        }
      });
    },
  },
};
</script>

<style scoped>

</style>