本文介紹了基于 Vue 的樹形選擇組件。分享給大家，具體如下：
系統(tǒng)要求：Vue 2
基本特性
截圖展示
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="icon" 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;">{ "客戶管理": { "我的客戶": { "新分配": {}, "跟進(jìn)中": {}, "簽單客戶": {}, "長期客戶": {} }, "長期客戶權(quán)限": { "設(shè)為長期客戶": {}, "還原長期客戶": {} } }, "采購列表": { "添加異常客情": {}, "添加采購單": {}, "采購?fù)素泦瘟斜?: {}, "供應(yīng)商管理": {}, "供應(yīng)商聯(lián)系人": {}, "品牌列表": { "寶潔": {}, "樂視": { "樂視網(wǎng)": {}, "樂視手機(jī)": { "樂視手機(jī) 1": {}, "樂視手機(jī) 2": {}, "樂視手機(jī) 3": {}, "樂視手機(jī) 4": {}, "樂視手機(jī) 5": { "體驗(yàn)超深層級": { "繼續(xù)體驗(yàn)超深層級": { "依然體驗(yàn)超深層級": {}, "依然體驗(yàn)超深層級 2": {} } } } }, "樂視電視": {} }, "可口可樂": {}, "圣象": {} } }}</textarea><script>// 初始數(shù)據(jù)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); // 遞歸計(jì)算子級 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); // 遞歸計(jì)算父級 this.refreshAllParentNodes(node.$parent); } }, log: function(o) { console.log(o); } }});vm = new Vue({ el: '#tree', data: { tree: treeData }, methods: { // 返回最終數(shù)據(jù) 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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
