快捷導(dǎo)航

vue實(shí)現(xiàn)樹形結(jié)構(gòu)樣式和功能的實(shí)例代碼

更新時(shí)間：2019年10月15日 09:23:05 作者：changhuanran

這篇文章主要介紹了vue樹形結(jié)構(gòu)樣式和功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一、主要運(yùn)用element封裝的控件并封裝成組件運(yùn)用，如圖所示

代碼如圖所示：

下面是子組件的代碼：

<template>
 <ul class="l_tree">
  <li class="l_tree_branch" v-for="item in model" :key="item.id">
   <div class="l_tree_click">
    <button type="button" class="l_tree_children_btn" v-if="item.children" @click="toggle(item)">{{ !item.show ? '-' : '+' }}</button>
    <span class="l_folder" @click="clickSize(item.id)" :class="current === item.id ? 'current' : 'currentSize'">{{ item.name }}</span>
   </div>
   <ew-tree
    v-show="!item.show"
    :model="item.children"
    :current="current"
    @change="changeCurrent"></ew-tree>
  </li>
 </ul>
</template>
<script>
export default {
 name: 'EwTree',
 props: {
  model: {
   type: Array,
   default() {
    return []
   }
  },
  current: {
   type: String,
   default: ''
  }
 },
 methods: {
  toggle(item) {
   console.log(item)
   var idx = this.model.indexOf(item)
   this.$set(this.model[idx], 'show', !item.show)
  },
  clickSize(id) {
   console.log(1, id)
   this.$emit('change', id)
  },
  changeCurrent(id) {
   this.clickSize(id)
  }
 },
 mounted() {
 }
}
</script>
<style lang="less" scoped>
*{
 box-sizing: border-box;
 margin: 0;padding: 0;
}
*:before,*:after{
 box-sizing: border-box;
}
ul,
li {
 list-style: none;
}
.current{
 color: #e9c309 !important
}
.l_tree_container {
 width: 100%;
 height: 100%;
 box-shadow: 0 0 3px #ccc;
 margin: 13px;
 position: relative;
}

.l_tree {
 width: calc(100%);
 padding-left: 15px;
}
.l_tree_branch {
 width: 100%;
 height: 100%;
 display: block;
 padding: 13px;
 position: relative;
}

.l_tree_branch .l_tree_children_btn {
 width: 12px;
 height: 12px;
 background-color: #515a68;
 font-size: 8px;
 text-align: center;
 color: #bbbec1;
 outline: none;
 border: 0;
 cursor: pointer;
 border: 1px solid #bbbec1;
 line-height: 11px;
 margin-left: 5px;
}

ul.l_tree:before {
 content: '';
 border-left: 1px dashed #999999;
 height: calc(100% - 24px);
 position: absolute;
 left: 10px;
 top: 0px;
}
.l_tree,
.l_tree_branch {
 position: relative;
}

.l_tree_branch::after {
 content: '';
 width: 18px;
 height: 0;
 border-bottom: 1px dashed #bbbec1;
 position: absolute;
 right: calc(100% - 10px);
 top: 24px;
 left: -5px;
}

.l_tree_container>.l_tree::before,
.l_tree_container>.l_tree>.l_tree_branch::after {
 display: none;
}
.l_folder {
 font-size:11px;
 margin-left: 5px;
 display: inline;
 color: #bbbec1;
 cursor: pointer;
}
</style>

主要難點(diǎn)是：current傳值問題，所以current綁定在父組件

父組件中的值和方法：

當(dāng)然在運(yùn)行npm時(shí)是需要安裝npm install ewtree -S,實(shí)現(xiàn)組件化

最終效果如下：

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)樹形結(jié)構(gòu)樣式和功能的實(shí)例代碼,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: