使用Vue實現(xiàn)一個樹組件的示例

更新時間：2020年11月06日 08:47:26 作者：秋荷雨翔

這篇文章主要介紹了使用Vue實現(xiàn)一個樹組件的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下

HTML代碼：

<!DOCTYPE html>
<html>
<head>
  <title>Vue Demo</title>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style type="text/css">
    /* span樣式 */
    .treeviewitem-span {
      font-size: 14px;
    }

    /* 箭頭樣式 */
    .treeviewitem-arrow-icon {
      margin-top: 3px;
      margin-left: 3px;
      margin-right: 3px;
      float: left;
      width: 0;
      height: 0;
      border-top-width: 6px;
      border-right-width: 0px;
      border-bottom-width: 6px;
      border-left-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent #666666;
      transform: rotate(0deg);
    }

    /* 90度旋轉(zhuǎn)箭頭樣式 */
    .treeviewitem-arrow-icon90 {
      margin-top: 3px;
      margin-left: 3px;
      margin-right: 3px;
      float: left;
      width: 0;
      height: 0;
      border-top-width: 6px;
      border-right-width: 0px;
      border-bottom-width: 6px;
      border-left-width: 6px;
      border-style: solid;
      border-color: transparent transparent transparent #666666;
      transform: rotate(90deg);
    }

    /* 模板隱藏 */
    template {
      display: none;
    }
  </style>

  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript">

  </script>
</head>
<body>
  <!-- treeviewitem模板 -->
  <template id="treeviewitem">
    <div>
      <div style="background-color:transparent; cursor:default; height:25px;"><div v-on:click="expand" style="width:16px; height:16px; float:left; background-color:transparent;"><span v-bind:class="[self.expand ? 'treeviewitem-arrow-icon90':'treeviewitem-arrow-icon']" v-if="isLeaf"></span></div><input type="checkbox" v-on:click="checkboxClick" v-model="self.selected" /><span v-on:click="itemClick" class="treeviewitem-span">{{ self.name }}</span></div>
      <div v-if="self.expand" v-for="item in items" style="margin-left:20px;">
        <treeviewitem v-bind:items="item.items" v-bind:self="item"></treeviewitem>
      </div>
    </div>
  </template>

  <!-- treeview模板 -->
  <template id="treeview">
    <div>
      <div v-for="item in items">
        <treeviewitem v-bind:items="item.items" v-bind:self="item"></treeviewitem>
      </div>
    </div>
  </template>

  <div id="app">
    <!-- 使用treeview組件 -->
    <treeview v-bind:items="items"></treeview>
    <br />
    <button onclick="showSelectedResult()">勾選結(jié)果</button>
  </div>

  <script type="text/javascript">
    //定義treeviewitem組件
    Vue.component('treeviewitem', {
      props: ['items', 'self'],
      template: '#treeviewitem',
      methods: {
        itemClick: function (d) {
          alert("您單擊了節(jié)點：" + this.self.name);
        },
        checkboxClick: function (e) {
          var checkChild;
          checkChild = function (items, checked) {
            for (var i = 0; i < items.length; i++) {
              var item = items[i];
              item.selected = checked;
              if (item.items) {
                checkChild(item.items, checked)
              }
            }
          };

          if (e.target.checked) {
            checkChild(this.items, true);
          } else {
            checkChild(this.items, false);
          }
        },
        expand: function (e) {
          if (this.self.expand) {
            this.self.expand = false;
          } else {
            this.self.expand = true;
          }
        }
      },
      computed: {
        isLeaf: function () {
          if (this.items && this.items.length > 0) {
            return true;
          }
          return false;
        }
      }
    });

    //定義treeview組件
    Vue.component('treeview', {
      props: ['items'],
      template: '#treeview'
    });

    //定義vm
    var vm = new Vue({
      el: '#app',
      methods: {
        /**
         * @description 獲取勾選結(jié)果
         */
        getSelected: function (items) {
          if (!items) items = this.items;

          var result = [];
          for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (item.selected) {
              result.push(item.name);
            }
            if (item.items) {
              var childSelected = this.getSelected(item.items);
              for (var k = 0; k < childSelected.length; k++) {
                result.push(childSelected[k]);
              }
            }
          }
          return result;
        }
      },
      data: {
        items: [
          {
            name: '條目1',
            expand: true,
            selected: false,
            items: [
              {
                name: '條目11',
                expand: true,
                selected: false,
                items: [
                  {
                    name: '條目111',
                    expand: true,
                    selected: true,
                  }
                ]
              },
              {
                name: '條目12',
                expand: false,
                selected: false,
                items: [
                  {
                    name: '條目121',
                    expand: true,
                    selected: false,
                  },
                  {
                    name: '條目122',
                    expand: true,
                    selected: false,
                    items: [
                      {
                        name: '條目1221',
                        expand: true,
                        selected: false
                      },
                      {
                        name: '條目1222',
                        expand: true,
                        selected: false
                      }
                    ]
                  }
                ]
              },
              {
                name: '條目13',
                expand: true,
                selected: false
              }
            ]
          },
          {
            name: '條目2',
            expand: true,
            selected: false
          },
          {
            name: '條目3',
            expand: true,
            selected: false,
            items: [
              {
                name: "條目31",
                expand: true,
                selected: false
              }
            ]
          }
        ]
      }
    })

    //顯示勾選結(jié)果
    function showSelectedResult() {
      var selected = vm.getSelected();
      alert("您勾選了：" + selected.join(', '));
    }
  </script>
</body>
</html>

效果圖：