Vue 기반 트 리 선택 구성 요소 의 예제 코드

6814 단어 vue나무형
본 고 는 Vue 기반 트 리 선택 구성 요 소 를 소개 합 니 다.여러분 께 공유 하 겠 습 니 다.구체 적 으로 다음 과 같 습 니 다.
시스템 요구 사항:Vue 2
기본 특성
  •  완벽 한 다단 계 연동 효과
  •  무한 다 중 등급 지원
  •  전 선·반 선·불 선 세 가지 상태 가 있다.
     캡 처 전시

    코드 는 다음 과 같 습 니 다:
    
     <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <link rel="icon" href="https://v1-cn.vuejs.org/images/logo.png" rel="external nofollow" type="image/x-icon">
     <title>Vue Tree Select Example</title>
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    </head>
    <body>
    
     <!--         -->
     <template id="one-select" style="display: none;">
      <ul>
       <li v-for="(node, key, index) in tree">
        <div v-if="key != 'selected'">
         <div v-on:click="nodeClick(node, index)" v-bind:class="[node.selected == null ? 'tree-select-null' : (node.selected == 'half' ? 'tree-select-half' : 'tree-select-full'), 'tree-select', 'inline-block']"></div>
         
         <div class="inline-block">{{ key }}</div>
         <div v-if="key != ''">
          <one-select v-bind:tree="node" v-bind:isroot="false"></one-select>
         </div>
        </div>
       </li>
      </ul>
     </template>
    
     <!--       -->
     <div id="tree">
      <one-select v-bind:isroot="true" v-bind:tree="tree"></one-select>
     </div>
    
    <textarea id="treeDataJSON" style="display: none;">
    {
     "    ": {
      "    ": {
       "   ": {},
       "   ": {},
       "    ": {},
       "    ": {}
      },
      "      ": {
       "      ": {},
       "      ": {}
      }
     },
     "    ": {
      "      ": {},
      "     ": {},
      "       ": {},
      "     ": {},
      "      ": {},
      "    ": {
       "  ": {},
       "  ": {
        "   ": {},
        "    ": {
         "     1": {},
         "     2": {},
         "     3": {},
         "     4": {},
         "     5": {
          "      ": {
           "        ": {
            "        ": {},
            "         2": {}
           }
          }
         }
        },
        "    ": {}
       },
       "    ": {},
       "  ": {}
      }
     }
    }
    </textarea>
    
    <script>
    //     
    var treeDataJSON = document.getElementById("treeDataJSON").value;
    var treeData = JSON.parse(treeDataJSON);
    Vue.component('one-select', {
     name: 'one-select',
     template: '#one-select',
     props: ['tree', 'isroot'],
     created: function() {
      var realTree = Object.assign({}, this.tree);
      delete realTree.selected;
      if (Object.keys(realTree).length === 0) { //      ,     
       this.refreshAllParentNodes(this.$parent);
      }
     },
     methods: {
      nodeClick: function(node, index) {
       if (node.selected === 'full' || node.selected === 'half') {
        Vue.set(node, 'selected', null);
       } else {
        Vue.set(node, 'selected', 'full');
       }
       this.refreshAllParentNodes(self.$parent);
       this.refreshAllParentNodes(this);
       this.refreshAllSonNodes(this.$children[index], node.selected);
      },
      refreshAllSonNodes: function(node, status) {
       if (node instanceof Vue && node.$children.length) {
        for (index in node.$children) {
         Vue.set(node.$children[index].tree, 'selected', status);
         //       
         this.refreshAllSonNodes(node.$children[index], status);
        }
       }
      },
      refreshAllParentNodes: function(node) {
       if (node instanceof Vue) {
        var status = null;
        var nullCount = 0;
        var halfCount = 0;
        var fullCount = 0;
        for (index in node.$children) {
         if (typeof node.$children[index].tree.selected === 'undefined') {
          nullCount++;
         } else if (node.$children[index].tree.selected === null) {
          nullCount++;
         } else if (node.$children[index].tree.selected === 'half') {
          halfCount++;
         } else if (node.$children[index].tree.selected === 'full') {
          fullCount++;
         }
        }
        if (fullCount === node.$children.length) {
         status = 'full';
        } else if (nullCount === node.$children.length) {
         status = null;
        } else {
         status = 'half';
        }
        Vue.set(node.tree, 'selected', status);
    
        //       
        this.refreshAllParentNodes(node.$parent);
       }
      },
      log: function(o) {
       console.log(o);
      }
     }
    });
    vm = new Vue({
     el: '#tree',
     data: {
      tree: treeData
     },
     methods: {
      //       
      getResult: function() {
       return Object.assign({}, this.tree);
      }
     }
    });
    </script>
    
    <style>
    #tree {
     width: 500px;
     margin: 0 auto;
     margin-top: 50px;
    }
    li {
     list-style: none;
     line-height: 25px;
    }
    .inline-block {
     display: inline-block;
    }
    .tree-select {
     width: 13px;
     height: 13px;
     line-height: 16px;
     margin: 3px;
     display: inline-block;
     vertical-align: middle;
     border: 0 none;
     cursor: pointer;
     outline: none;
     background-color: transparent;
     background-repeat: no-repeat;
     background-attachment: scroll;
     background-image: url('selects.png');
    }
    .tree-select-null {
     background-position: 0 0;
    }
    .tree-select-full {
     background-position: -14px 0;
    }
    .tree-select-half {
     background-position: -14px -28px;
    }
    </style>
    
    </body>
    </html>
    
    
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
  • 좋은 웹페이지 즐겨찾기