vue项目怎样使用elementUI的树形组件 tree组件

谁借莪１个温暖的怀抱￠ 2021-12-01 12:44 437阅读 0赞

## 在模板中使用el-tree标签 给data属性绑定树形结构数据即可 ##

<el-tree :data="treeData"></el-tree>

## 接着在data中编写数据 ##

treeData: [
            {
              label: "java",
              children: []
            },
            {
              label: "web",
              children: [
                {
                  label: "js",
                  children: []
                },
                {
                  label: "html",
                  children: []
                },
                {
                  label: "css",
                  children: []
                }
              ]
            },
            {
              label: "python",
              children: []
            }
          ]

## 保存，即可看到效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70][]

## 当然，elementui的树形组件默认是以label字段作为名称显示的，如果没有label字段，比如这个的名称是name，那么树形组件就不会显示文字了 ##

treeData: [
            {
              name: "java",
              children: []
            },
            {
              name: "web",
              children: [
                {
                  name: "js",
                  children: []
                },
                {
                  name: "html",
                  children: []
                },
                {
                  name: "css",
                  children: []
                }
              ]
            },
            {
              name: "python",
              children: []
            }
          ],

## 为了能够显示，我们要设置一个字段映射 ##

## 在data中定义一个对象，比如 ##

customProps:{
            label:'name',
            children:'children'
          }

## 然后绑定到树形组件的props属性里即可 ##

<el-tree :props="customProps" :data="treeData"></el-tree>

## 全部代码 ##

<template>
      <div id="app">
        <div class="box">
          <el-tree :props="customProps" :data="treeData"></el-tree>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          treeData: [
            {
              name: "java",
              children: []
            },
            {
              name: "web",
              children: [
                {
                  name: "js",
                  children: []
                },
                {
                  name: "html",
                  children: []
                },
                {
                  name: "css",
                  children: []
                }
              ]
            },
            {
              name: "python",
              children: []
            }
          ],
          customProps:{
            label:'name',
            children:'children'
          }
        };
      }
    };
    </script>
    
    <style>
    .box {
      width: 200px;
      margin: 20px auto;
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpZGFtaW1pMA_size_16_color_FFFFFF_t_70]: /images/20211201/4270c56fd39e412d8939131963a90ada.png