本文例項為大家分享了開發樹形結構元件的具體程式碼，供大家參考，具體內容如下

需求

一個頁面，要顯示商品分類，同時每個分類下面還擁有若干子類，子類也可以有子類。

要實現全選單選，子類被逐個全選父類也要標記選中。

第一反應就是樹形結構，和遞迴呼叫。曾經在做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.Child
 
TypeList&&node.IsExpanded }"  @click="expandNode(!node.IsExpanded,node)">
      vcOVNw    <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/iwww.cppcns.com
 
mg/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>

：

<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',this.nodes.every((node) => { return node.IsSelected === choice }))
          }
        } else {
          // 若其[Index]節點下子節點有未被選中狀態的，該[Index]節點就應該未選中
          this.nodes[index].IsSelected = choice
          this.$emit('selectFatherNode',false)
        }
      },// 展開/收起 當前節點
      expandNode (choice,node) {
        node.IsExpanded = choice
        if (!choice) {
          this.expandChildrenNode(choice,node.ChildTypeList)
        }
      },// 子節點收起
      expandChildrenNode (choice,self) {
        let _self = self || this
        nodes.forEach((node) =>http://www.cppcns.com; { node.IsExpanded = choice; _self.expandChildrenNode(choice,_self) })
      }
    }
  }
</script>

：

<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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。