基于 Vue 的樹形選擇組件的示例代碼

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:32:36

基于 Vue 的樹形選擇組件的示例代碼

基于 Vue 的樹形選擇組件的示例代碼:本文介紹了基于 Vue 的樹形選擇組件。分享給大家，具體如下：系統(tǒng)要求：Vue 2 基本特性完美的多級(jí)聯(lián)動(dòng)效果支持無限多的分級(jí) 有全選、半選、不選三種狀態(tài) 截圖展示代碼如下： <!DOCTYPE html> <html lang=e

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀基于 Vue 的樹形選擇組件的示例代碼:本文介紹了基于 Vue 的樹形選擇組件。分享給大家，具體如下：系統(tǒng)要求：Vue 2 基本特性完美的多級(jí)聯(lián)動(dòng)效果支持無限多的分級(jí) 有全選、半選、不選三種狀態(tài) 截圖展示代碼如下： <!DOCTYPE html> <html lang=e

本文介紹了基于 Vue 的樹形選擇組件。分享給大家，具體如下：

系統(tǒng)要求：Vue 2

基本特性

完美的多級(jí)聯(lián)動(dòng)效果

支持無限多的分級(jí)

有全選、半選、不選三種狀態(tài)

截圖展示

代碼如下：

 <!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)中": {},
 "簽單客戶": {},
 "長(zhǎng)期客戶": {}
 },
 "長(zhǎng)期客戶權(quán)限": {
 "設(shè)為長(zhǎng)期客戶": {},
 "還原長(zhǎng)期客戶": {}
 }
 },
 "采購列表": {
 "添加異?？颓?: {},
 "添加采購單": {},
 "采購?fù)素泦瘟斜?: {},
 "供應(yīng)商管理": {},
 "供應(yīng)商聯(lián)系人": {},
 "品牌列表": {
 "寶潔": {},
 "樂視": {
 "樂視網(wǎng)": {},
 "樂視手機(jī)": {
 "樂視手機(jī) 1": {},
 "樂視手機(jī) 2": {},
 "樂視手機(jī) 3": {},
 "樂視手機(jī) 4": {},
 "樂視手機(jī) 5": {
 "體驗(yàn)超深層級(jí)": {
 "繼續(xù)體驗(yàn)超深層級(jí)": {
 "依然體驗(yàn)超深層級(jí)": {},
 "依然體驗(yàn)超深層級(jí) 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) { // 判斷最低級(jí)，再刷新父級(jí)
 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ì)算子級(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ì)算父級(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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

基于 Vue 的樹形選擇組件的示例代碼

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： VUE 組件基于

熱門焦點(diǎn)

基于 Vue 的樹形選擇組件的示例代碼

基于 Vue 的樹形選擇組件的示例代碼

基于 Vue 的樹形選擇組件的示例代碼

最新推薦

猜你喜歡

熱門推薦