关于el-tree树形结构的理解

最新推荐文章于 2024-07-23 15:23:00 发布

前端世界的蒋小姐

最新推荐文章于 2024-07-23 15:23:00 发布

阅读量2k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_51258044/article/details/122702687

版权

本文探讨了el-tree组件的两种主要数据结构构建方式，包括通过含有children属性的对象数组以及多个独立数组的方式。重点介绍了配置项如props、default-expanded-keys、node-click以及loadNode在懒加载中的应用，同时提及了树形结构的可选形式。

摘要由CSDN通过智能技术生成

根据数据结构可划分为两种方式进行树形构建。特别地，还有一种节点可选形式。

（1）数据data是一个由多个对象组成的数组，对象含有children属性（里面是多个对象组成的数组）

获取树形结构的数据data="treeData"
设置树形配置项props="treeProps",对应着数据每一个对象的属性
设置默认展开项数组default-expanded-keys="default_expanded_keys"，默认展开第一项所有子树
点击节点（分等级）@node-click="node_click（obj,node）",获取对应的（列表）需要的数据

<!--树形结构:data -->
<template>
  <div>
    <el-tree ref="el_tree"
             :data="treeData"
             :props="treeProps"
             node-key="id"
             :default-expanded-keys="default_expanded_keys"
             @node-click="node_click">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span class="cust-label">{
  { node.label }}</span>
      </span>
    </el-tree>
  </div>

</template>

<script>
export default {
  name: "index",
  data() {
    return {
      //树形的配置项
      treeProps: {
        //节点标签---节点对象的label属性
        label: 'label',
        //子树----节点对象的children属性
        children: 'children',
        //是否为叶子节点--节点对象的leaf属性
        // isLeaf:'leaf'
      },
      //默认展开节点数据
      default_expanded_keys: [],
      treeData: [
        {//根节点
          id: 1,
          label: '全部',
          children: [{//一级节点
            id: 2,
            label: '一级 1',
            children: [{//二级节点
              id: 3,
              label: '二级 1-1',
              children: [{//三级节点
                id: 4,
                label: '三级 1-1-1'
              }]
            }]
          },
            {
              id: 5,
              label: '一级 2',
              children: [{
                id: 6,
                label: '二级 2-1',
                children: [{
                  id: 7,
                  label: '三级 2-1-1'
                }]
              },
                {
                  id: 8,
                  label: '二级 2-2',
                  child