本文實(shí)例為大家分享了Vue自定義樹形控件的使用方法，供大家參考，具體內(nèi)容如下

效果圖：

數(shù)據(jù)結(jié)構(gòu)：

tree: {title: ’’, // 標(biāo)題（姓名） key: ’0’,head: ’’, // 頭像selectStatus: false, // checkBox選中狀態(tài)children: [ { title: ’旺旺一部’, key: ’0-0’, head: ’’, selectStatus: false, children: [ {key: ’0-0-0’,title: ’旺仔1’,head: require(’@/assets/wan.jpg’),selectStatus: false } ] }, { title: ’旺旺二部’, key: ’0-1’, head: ’’, selectStatus: false, children: [ {title: ’旺旺二部一隊(duì)’,key: ’0-1-0’,head: ’’,selectStatus: false,children: [ { title: ’旺旺二部一隊(duì)一班’, key: ’0-1-0-2’, head: ’’, selectStatus: false, children: [ {title: ’旺仔3’,key: ’0-1-0-2-0’,head: require(’@/assets/wan.jpg’),selectStatus: false } ] }] } ] }]},

思路：

/*自定義樹形控件的核心就是“組件自己調(diào)用自己” 這里將樹形控件封裝成一個子組件*/<template> <div> <div class='tree-custom'> <div : @click='toggleChildren'> //toggleChildren事件為“展開內(nèi)容”、“關(guān)閉內(nèi)容”的控制事件 /*這里是遞歸數(shù)據(jù)顯示的具體內(nèi)容 例如：本項(xiàng)目遞歸的具體內(nèi)容從效果圖上看就是“圖片/頭像”、“標(biāo)題/名字”、“null/CheckBox” 效果圖顯示邏輯是： <div v-if='!headImg && label' > //如果沒有頭像圖片有標(biāo)題，則顯示 “箭頭-標(biāo)題”樣式</div><div v-if='headImg'> //如果有頭像圖片，則顯示 “頭像-姓名-checkBox”樣式</div> */ </div> <tree-custom // “自己調(diào)用自己”:key='children.key' // key值唯一 v-for='children in treeData' v-if='showChildren' // 根據(jù) toggleChildren事件 判斷是否展開內(nèi)容:treeData='children.children' // 下面都是一些屬性，應(yīng)該都能看懂吧！不多說了！:label='children.title':headImg='children.head':pkid='children.key':depth='depth+1' // 這個是用來控制每行縮進(jìn)的樣式，可移步下方=>indent ()看具體用處:selectStatus='children.selectStatus'v-bind='$attrs' // 這兩個是用來實(shí)現(xiàn)祖孫組件通信的v-on='$listeners' > </tree-custom> </div> </div></template><script>export default { name: ’TreeCustom’, // 要給我們的組件一個名字！不然怎么調(diào)用呢 data () { return { showChildren: true, // 這個就是控制是否顯示內(nèi)容的data~也就是展開和收起！ currentInfoData: {} // 這個的用處是獲取當(dāng)前行的數(shù)據(jù)，為了簡潔在上方代碼的具體用處已經(jīng)被我刪掉了~意義不大 } }, //對象的默認(rèn)值應(yīng)由一個工廠函數(shù)返回，避免采坑 props: { treeData: { type: Array, default: () => [] }, label: { type: String, default: () => ’’ }, depth: { type: Number, default: () => 0 }, headImg: { type: String, default: () => ’’ }, pkid: { type: String, default: () => ’’ }, selectStatus: { type: Boolean, default: () => null } }, computed: { indent () { // 定義不同層級的縮進(jìn)樣式 return { transform: `translate(${(this.depth - 1) * 15}px)` } } }, methods: { toggleChildren () { this.showChildren = !this.showChildren }, checkBoxSelectChange (e) { const checked = e.target.checked if (checked) { //使用$listeners方法調(diào)用祖輩的函數(shù)，因?yàn)檫@邊是遞歸組件所以組件之間可能并不是嚴(yán)格的父子關(guān)系，所以$emit、$parent等方法都是不合適的this.$listeners.addSelectedData(this.currentInfoData) } if (!checked) {this.$listeners.deleteSelectedData(this.currentInfoData) } }, getCurrentInfo (label, headImg, pkid) { this.currentInfoData = {key: pkid,title: label,head: headImg } } }}</script>

/*組件調(diào)用方法*/<div class='tree-scroll'> <tree-custom :label='tree.title' :headImg='tree.head' :treeData='tree.children' :pkid='tree.key' :depth='0' :selectStatus='tree.selectStatus' @addSelectedData='addSelectedData' @deleteSelectedData='deleteSelectedData' /></div>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。