element - ui tree
阿新 • • 發佈:2018-07-12
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: [{ 13label: ‘一級 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