1. 程式人生 > >element - ui tree

element - ui tree

ltp rod time clas bsp 博客 pan product ()

一行代碼兩行淚,沒有外網真可怕!好久沒寫博客了,更新一把。

 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/>‘
})

element - ui tree