您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue開發(fā)樹形結(jié)構(gòu)組件的代碼分享”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue開發(fā)樹形結(jié)構(gòu)組件的代碼分享”吧!
本文實(shí)例為大家分享了vue開發(fā)樹形結(jié)構(gòu)組件的具體代碼,供大家參考,具體內(nèi)容如下
一個(gè)頁面,要顯示商品分類,同時(shí)每個(gè)分類下面還擁有若干子類,子類也可以有子類。
要實(shí)現(xiàn)全選單選,子類被逐個(gè)全選父類也要標(biāo)記選中。
第一反應(yīng)就是樹形結(jié)構(gòu),和遞歸調(diào)用。曾經(jīng)在做WPF時(shí)記得有現(xiàn)成的組件,也學(xué)著寫過對(duì)應(yīng)的后臺(tái)。這次我要自己寫一個(gè)前端的組件了。
這只是我自己花了點(diǎn)時(shí)間寫的一個(gè)vue組件,尚可優(yōu)化及拓展。僅此與大家分享一下。
<template> <div id="TreeMenu"> <div v-for="(node, index) in nodes" :class="{'TreeMenu-row-border-bottom': !depth}"> <div class="TreeMenu-row"> <img class="TreeMenu-row-selectimg" src="../assets/img/MembersPriceActivity/selected.png" @click="selectNode(0,node)" v-show="node.IsSelected"/> <img class="TreeMenu-row-selectimg" src="../assets/img/MembersPriceActivity/select.png" @click="selectNode(1,node)" v-show="!node.IsSelected"/> <div class="TreeMenu-row-firstdiv" :class="{'TreeMenu-row-border-bottom': node.ChildTypeList&&node.IsExpanded }" @click="expandNode(!node.IsExpanded,node)"> <label v-text="node.Name"></label> <img class="TreeMenu-row-arrowimg" src="../assets/img/MembersPriceActivity/top.png" v-if="node.ChildTypeList" v-show="!node.IsExpanded"> <img class="TreeMenu-row-arrowimg" src="../assets/img/MembersPriceActivity/down.png" v-if="node.ChildTypeList" v-show="node.IsExpanded"> </div> <TreeMenu :nodes="node.ChildTypeList" :fatherIndex="index" :depth="depth+1" v-on:selectFatherNode="selectFatherNode" v-if="node.ChildTypeList" v-show="!node.IsExpanded"></TreeMenu> </div> </div> </div> </template>
js:
<script> export default{ name: 'TreeMenu', data () { return { goodstype: { ID: '', ParentID: '', Name: '', Code: '', Level: 0, ImgUrl: null, ChildTypeList: [] } } }, props: { nodes: { type: Array, default: () => { return [] } }, fatherIndex: { type: Number, default: 0 }, depth: { type: Number, default: 0 } }, watch: {}, created () {}, mounted () {}, destroyed () {}, methods: { // 選中/取消 當(dāng)前節(jié)點(diǎn) selectNode (choice, node) { node.IsSelected = choice this.selectChildrenNode(choice, node.ChildTypeList || []) this.$emit('selectFatherNode', choice, this.fatherIndex, this.nodes.every((node) => { return node.IsSelected === choice })) }, // 子節(jié)點(diǎn)修改選中狀態(tài) selectChildrenNode (choice, nodes, self) { let _self = self || this nodes.forEach((node) => { node.IsSelected = choice; _self.selectChildrenNode(choice, node.ChildTypeList || [], _self) }) }, // 作為父級(jí)節(jié)點(diǎn)檢查是否需要修改選中狀態(tài)(僅用于子節(jié)點(diǎn)調(diào)用) selectFatherNode (choice, index, childrenState) { if (choice) { // 若其[Index]節(jié)點(diǎn)下子節(jié)點(diǎn)均為被選中狀態(tài),該[Index]節(jié)點(diǎn)就應(yīng)該被選中 if (childrenState) { this.nodes[index].IsSelected = choice this.$emit('selectFatherNode', choice, this.fatherIndex, this.nodes.every((node) => { return node.IsSelected === choice })) } } else { // 若其[Index]節(jié)點(diǎn)下子節(jié)點(diǎn)有未被選中狀態(tài)的,該[Index]節(jié)點(diǎn)就應(yīng)該未選中 this.nodes[index].IsSelected = choice this.$emit('selectFatherNode', choice, this.fatherIndex, false) } }, // 展開/收起 當(dāng)前節(jié)點(diǎn) expandNode (choice, node) { node.IsExpanded = choice if (!choice) { this.expandChildrenNode(choice, node.ChildTypeList) } }, // 子節(jié)點(diǎn)收起 expandChildrenNode (choice, nodes, self) { let _self = self || this nodes.forEach((node) => { node.IsExpanded = choice; _self.expandChildrenNode(choice, node.ChildTypeList || [], _self) }) } } } </script>
CSS:
<style lang="scss" scoped> #TreeMenu { .TreeMenu-row{ margin-left: 30px; font-size: 15px; padding: 12px 0 0 0; } .TreeMenu-row-firstdiv{ height: 32px; margin-left: 30px; } .TreeMenu-row-arrowimg{ float: right; margin-right: 15px; width: 13px; } .TreeMenu-row-selectimg{ float: left; width: 18px; vertical-align: text-bottom; } .TreeMenu-row-border-bottom{ border-bottom: solid 1px #e6e6e6; } .TreeMenu-row-border-top{ border-top: solid 1px #e6e6e6; } } </style>
到此,相信大家對(duì)“vue開發(fā)樹形結(jié)構(gòu)組件的代碼分享”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。