Vue自定義樹形控件使用詳解
更新時間:2021年08月17日 11:53:27 作者:AcongMiss
這篇文章主要為大家詳細(xì)介紹了Vue自定義樹形控件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了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: '旺旺二部一隊', key: '0-1-0', head: '', selectStatus: false, children: [ { title: '旺旺二部一隊一班', 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 :style="indent" @click="toggleChildren"> //toggleChildren事件為“展開內(nèi)容”、“關(guān)閉內(nèi)容”的控制事件 /* 這里是遞歸數(shù)據(jù)顯示的具體內(nèi)容 例如:本項目遞歸的具體內(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" // 這兩個是用來實現(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)格的父子關(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue+elementUI實現(xiàn)多文件上傳與預(yù)覽功能實戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08在移動端使用vue-router和keep-alive的方法示例
這篇文章主要介紹了在移動端使用vue-router和keep-alive的方法示例,vue-router與keep-alive提供的路由體驗與移動端是有一定差別的,感興趣的小伙伴們可以參考一下2018-12-12