element - ui tree

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

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from ‘vue‘
import App from ‘./App‘
import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;
Vue.use(ElementUI);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
})