1. 程式人生 > >vue的tree元件

vue的tree元件

看   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>