vue项目怎样使用elementUI的树形组件 tree组件-蒲公英云

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

在模板中使用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>