vue開發樹形結構組件(組件遞歸)
本文實例為大傢分享瞭vue開發樹形結構組件的具體代碼,供大傢參考,具體內容如下
需求
一個頁面,要顯示商品分類,同時每個分類下面還擁有若幹子類,子類也可以有子類。
要實現全選單選,子類被逐個全選父類也要標記選中。
第一反應就是樹形結構,和遞歸調用。曾經在做WPF時記得有現成的組件,也學著寫過對應的後臺。這次我要自己寫一個前端的組件瞭。
這隻是我自己花瞭點時間寫的一個vue組件,尚可優化及拓展。僅此與大傢分享一下。
效果
實現
<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: { // 選中/取消 當前節點 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 })) }, // 子節點修改選中狀態 selectChildrenNode (choice, nodes, self) { let _self = self || this nodes.forEach((node) => { node.IsSelected = choice; _self.selectChildrenNode(choice, node.ChildTypeList || [], _self) }) }, // 作為父級節點檢查是否需要修改選中狀態(僅用於子節點調用) selectFatherNode (choice, index, childrenState) { if (choice) { // 若其[Index]節點下子節點均為被選中狀態,該[Index]節點就應該被選中 if (childrenState) { this.nodes[index].IsSelected = choice this.$emit('selectFatherNode', choice, this.fatherIndex, this.nodes.every((node) => { return node.IsSelected === choice })) } } else { // 若其[Index]節點下子節點有未被選中狀態的,該[Index]節點就應該未選中 this.nodes[index].IsSelected = choice this.$emit('selectFatherNode', choice, this.fatherIndex, false) } }, // 展開/收起 當前節點 expandNode (choice, node) { node.IsExpanded = choice if (!choice) { this.expandChildrenNode(choice, node.ChildTypeList) } }, // 子節點收起 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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue遞歸實現樹形組件
- Go語言題解LeetCode705設計哈希集合
- vue實現簡單的購物車小案例
- java數據結構圖論霍夫曼樹及其編碼示例詳解
- C++實現LeetCode(111.二叉樹的最小深度)