Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础用法

基础的树形结构展示。

 1 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
 2 
 3 <script>
 4   export default {
 5     data() {
 6       return {
 7         data: [{
 8           label: '一级 1',
 9           children: [{
10             label: '二级 1-1',
11             children: [{
12               label: '三级 1-1-1'
13             }]
14           }]
15         }, {
16           label: '一级 2',
17           children: [{
18             label: '二级 2-1',
19             children: [{
20               label: '三级 2-1-1'
21             }]
22           }, {
23             label: '二级 2-2',
24             children: [{
25               label: '三级 2-2-1'
26             }]
27           }]
28         }, {
29           label: '一级 3',
30           children: [{
31             label: '二级 3-1',
32             children: [{
33               label: '三级 3-1-1'
34             }]
35           }, {
36             label: '二级 3-2',
37             children: [{
38               label: '三级 3-2-1'
39             }]
40           }]
41         }],
42         defaultProps: {
43           children: 'children',
44           label: 'label'
45         }
46       };
47     },
48     methods: {
49       handleNodeClick(data) {
50         console.log(data);
51       }
52     }
53   };
54 </script>

View Code