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