vue的tree元件
阿新 • • 發佈：2019-01-10
看 https://github.com/vuejs/vue/tree/dev/examples/tree
超簡單的demo，主要理解遞迴元件。暫時儲存一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue.js tree view example</title> <style> body { font-family: Menlo, Consolas, monospace; color: #444; } .item { cursor: pointer; } .bold { font-weight: bold; display: inline-block; position: relative; } .show { position: absolute; left: -30px; } .main:hover .add{ display: inline-block; } .add { display: none; } ul { margin-top: 0; line-height: 1.5em; list-style-type: none; } </style> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id='app'> <md-tree class="item" :model="treeData"></md-tree> </div> <script type="text/javascript"> Vue.component('MdTree', { name: 'md-tree', props: { model: Object }, data () { return { open: false } }, computed: { isFolder () { return this.model.children && this.model.children.length } }, template : ` <li> <div :class="{bold: isFolder}" class="main"> <span class="show" v-if="isFolder" @click="toggle">[{{open ? '-' : '+'}}]</span> {{model.name}} <span @click="addChild(model)" v-if="model.name !== '根節點'" class="add"> + </span> </div> <ul v-show="open" v-if="isFolder"> <md-tree class="item" v-for="(model, index) in model.children" :key="index" :model="model"> </md-tree> </ul> </li>`, methods: { toggle: function () { if (this.isFolder) { this.open = !this.open } }, changeType: function () { if (!this.isFolder) { Vue.set(this.model, 'children', []) this.addChild() this.open = true } }, addChild (model) { if (model.children) { model.children.push({name: '新節點'}) this.open = true } else { Vue.set(model, 'children', [ {name: '新節點'} ]) this.open = true } console.log(model) } } }); var app = new Vue({ el : '#app', data () { return { treeData: { name: '根節點', children: [ { name: '節點1' }, { name: '節點2' }, { name: '節點3', children: [ { name: '節點3.1', children: [ { name: '節點3.1.1' }, { name: '節點3.1.2' } ] }, { name: '節點3.2' }, { name: '節點3.3' }, { name: '節點3.4', children: [ { name: '節點3.4.1' }, { name: '節點3.4.2' } ] } ] } ] } } } }); </script> </body> </html>