您好,登錄后才能下訂單哦!
一、主要運(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時是需要安裝npm install ewtree -S
,實現(xiàn)組件化
最終效果如下:
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)樹形結(jié)構(gòu)樣式和功能的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。