Vue組件化開發(fā)的必備技能之組件遞歸
前言
不知道大家有沒遇到過這樣的場景:渲染列表數(shù)據(jù)的時(shí)候,列表的子項(xiàng)還是列表。如果層級少尚且可以用幾個(gè)for循環(huán)搞定,但是層級多或者層級不確定就有點(diǎn)無從下手了。
其實(shí)這就是樹形結(jié)構(gòu)數(shù)據(jù),像常見的組織架構(gòu)圖,文件夾目錄,導(dǎo)航菜單等都屬于這種結(jié)構(gòu)。很多組件庫都帶有樹形組件,但往往樣式不是我們想要的,改起來也非常的費(fèi)勁。那么,如何自己渲染這些數(shù)據(jù)呢?答案就是——組件遞歸!
效果展示
以上就是使用組件遞歸,并加入簡單交互的展示效果。點(diǎn)擊節(jié)點(diǎn)會在控制臺輸出節(jié)點(diǎn)對應(yīng)的數(shù)據(jù),如果有子節(jié)點(diǎn),則會展開或收起子節(jié)點(diǎn)。接下來我們就看看如何實(shí)現(xiàn)以上效果吧!
渲染完整數(shù)據(jù)
渲染數(shù)據(jù)這一步非常簡單,首先是把樹形結(jié)構(gòu)封裝成一個(gè)列表組件,其次判斷每一項(xiàng)有沒有子節(jié)點(diǎn),如果有子節(jié)點(diǎn),再使用自身組件去渲染就可以了。
src/components/myTree.vue
<template> <div class="tree-item"> <div v-for="item in treeData" :key="item.id"> <div class="item-title">{{ item.name }}</div> <div v-if="item.children && item.children.length" class="item-childen"> <my-tree :treeData="item.children"></my-tree> </div> </div> </div> </template> <script> export default { name: 'myTree', props: { treeData: { type: Array, default: () => [] } } } </script> <style lang="scss" scoped> .tree-item { .item-title { padding: 4px 8px; } .item-childen { padding-left: 20px; } } </style>
src/App.vue
<template> <my-tree :tree-data="treeData"></my-tree> </template> <script> const treeData = [ { id: 1, name: '一級1' }, { id: 2, name: '一級2', children: [ { id: 3, name: '二級2-1' }, { id: 4, name: '二級2-2' } ] }, { id: 5, name: '一級3', children: [ { id: 6, name: '二級3-1', children: [ { id: 7, name: '三級3-1-1' }, { id: 8, name: '三級3-1-2' } ] }, { id: 9, name: '二級3-2' }, { id: 10, name: '二級3-3' } ] } ] import myTree from '@/components/myTree.vue' export default { components: { myTree }, data() { return { treeData: treeData } } } </script>
效果如下
獲取節(jié)點(diǎn)數(shù)據(jù)
接下來我們要做的是,點(diǎn)擊節(jié)點(diǎn)時(shí)在控制臺輸出對應(yīng)的數(shù)據(jù)。首先我們使用 $emit,將一級節(jié)點(diǎn)的 item 傳遞出去,也就是子傳父的方法,相信大家都會。
其次是將內(nèi)層節(jié)點(diǎn)的數(shù)據(jù)傳遞出去,同樣使用子傳父的方法,只是我們需要給組件里面的 my-tree 綁定@node-click="$emit('node-click', $event)"
,這樣每次子級每次都可以調(diào)用父級的 node-click 方法,父級又調(diào)用它的父級 node-click 方法,最終調(diào)的都是最外層的 node-click 方法,我們只需要在這個(gè)過程中,把數(shù)據(jù)傳遞過去就可以了。這塊有點(diǎn)繞,相信大家多看幾遍應(yīng)該可以看懂。修改如下:
src/components/myTree.vue
<div class="item-title" @click="itemNodeClick(item)">{{ item.name }}</div> <div v-if="item.children && item.children.length" class="item-childen"> <my-tree :treeData="item.children" @node-click="$emit('node-click', $event)" ></my-tree> </div> ... itemNodeClick(item) { this.$emit("node-click", item) }
src/App.vue
<my-tree :tree-data="treeData" @node-click="nodeClick"></my-tree> ... nodeClick(val) { console.log(val) }
效果如下
動態(tài)展開收起
這一步的思路是給組件設(shè)置一個(gè)數(shù)組,數(shù)組中存放的是當(dāng)前列表中需要展開的節(jié)點(diǎn)的id,當(dāng)點(diǎn)擊節(jié)點(diǎn)的時(shí)候添加或刪除節(jié)點(diǎn)id,然后判斷每個(gè)節(jié)點(diǎn)的id在不在這個(gè)數(shù)組,在則顯示子節(jié)點(diǎn),不在則隱藏子節(jié)點(diǎn)。
src/components/myTree.vue
<div class="item-title" @click="nodeClick(item)"> <span>{{ item.name }}</span> <span v-if="item.children && item.children.length"> [{{ isOpen(item.id) ? '-' : '+' }}] </span> </div> <div v-if="item.children && item.children.length" v-show="isOpen(item.id)" class="item-childen" > <my-tree :treeData="item.children" @node-click="$emit('node-click', $event)" ></my-tree> </div> ... data() { return { expandedKeys: [] // 當(dāng)前列表需要展開的節(jié)點(diǎn)id組成的數(shù)組 } }, methods: { nodeClick(item) { this.$emit('node-click', item) if (item.children && item.children.length) { let index = this.expandedKeys.indexOf(item.id) if (index > -1) { // 如果當(dāng)前節(jié)點(diǎn)id存在數(shù)組中,則刪除 this.expandedKeys.splice(index, 1) } else { // 如果當(dāng)前節(jié)點(diǎn)id不存在數(shù)組中,則添加 this.expandedKeys.push(item.id) } } }, isOpen(id) { // 判斷節(jié)點(diǎn)id在不在數(shù)組中,在則顯示,不在則隱藏 return this.expandedKeys.includes(id) } }
效果如下
最后我們再添加一些樣式,就大功告成啦!
完整代碼
src/components/myTree.vue
<template> <div class="tree-item"> <div v-for="item in treeData" :key="item.id"> <div class="item-title" @click="nodeClick(item)"> <span>{{ item.name }}</span> <span v-if="item.children && item.children.length"> [{{ isOpen(item.id) ? '-' : '+' }}] </span> </div> <div v-if="item.children && item.children.length" v-show="isOpen(item.id)" class="item-childen" > <my-tree :treeData="item.children" @node-click="$emit('node-click', $event)" ></my-tree> </div> </div> </div> </template> <script> export default { name: 'myTree', props: { treeData: { type: Array, default: () => [] } }, data() { return { expandedKeys: [] // 當(dāng)前展開的節(jié)點(diǎn)id組成的數(shù)組 } }, methods: { nodeClick(item) { this.$emit('node-click', item) if (item.children && item.children.length) { let index = this.expandedKeys.indexOf(item.id) if (index > -1) { // 如果當(dāng)前節(jié)點(diǎn)id存在數(shù)組中,則刪除 this.expandedKeys.splice(index, 1) } else { // 如果當(dāng)前節(jié)點(diǎn)id不存在數(shù)組中,則添加 this.expandedKeys.push(item.id) } } }, isOpen(id) { // 判斷節(jié)點(diǎn)id在不在數(shù)組中,在則顯示,不在則隱藏 return this.expandedKeys.includes(id) } } } </script> <style lang="scss" scoped> .tree-item { cursor: pointer; .item-title { padding: 4px 8px; &:hover { background: #eee; } } .item-childen { padding-left: 20px; } } </style>
src/App.vue
<template> <my-tree :tree-data="treeData" @node-click="nodeClick"></my-tree> </template> <script> const treeData = [ { id: 1, name: '一級1' }, { id: 2, name: '一級2', children: [ { id: 3, name: '二級2-1' }, { id: 4, name: '二級2-2' } ] }, { id: 5, name: '一級3', children: [ { id: 6, name: '二級3-1', children: [ { id: 7, name: '三級3-1-1' }, { id: 8, name: '三級3-1-2' } ] }, { id: 9, name: '二級3-2' }, { id: 10, name: '二級3-3' } ] } ] import myTree from '@/components/myTree.vue' export default { components: { myTree }, data() { return { treeData: treeData } }, methods: { nodeClick(val) { console.log(val) } } } </script>
效果如下
以上就是今天的分享!有興趣的小伙伴可以動手試一哈,把組件進(jìn)一步封裝,或修改成自己想要的樣式。 Vue官方的樹形視圖:cn.vuejs.org/v2/examples…
總結(jié)
到此這篇關(guān)于Vue組件化開發(fā)的必備技能之組件遞歸的文章就介紹到這了,更多相關(guān)Vue組件遞歸內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vueJs實(shí)現(xiàn)DOM加載完之后自動下拉到底部的實(shí)例代碼
這篇文章主要介紹了vueJs實(shí)現(xiàn)DOM加載完成之后自動下拉到底部的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08webpack配置導(dǎo)致字體圖標(biāo)無法顯示的解決方法
下面小編就為大家分享一篇webpack配置導(dǎo)致字體圖標(biāo)無法顯示的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能,本文通過兩種方法,給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04vue2使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽
這篇文章主要為大家詳細(xì)介紹了vue2如何使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12