Vue實(shí)現(xiàn)無限級樹形選擇器
前言：
想要在 Vue 中實(shí)現(xiàn)一個這樣的無限級樹形選擇器其實(shí)并不難，關(guān)鍵點(diǎn)在于利用 遞歸組件 和 高階事件監(jiān)聽，下面我們就一步步來實(shí)現(xiàn)它。
簡單實(shí)現(xiàn)下樣式
創(chuàng)建 Tree.vue 組件（為方便閱讀，代碼有省略）：
<template>
<ul class="treeMenu">
<li v-for="(item, index) in data" :key="index">
<i v-show="item.children" :class="triangle" />
<p :class="treeNode">
<label class="checkbox-wrap" @click="checked(item)">
<input v-if="isSelect" v-model="item.checked" type="checkbox" class="checkbox" />
</label>
<span class="title" @click="tap(item, index)">{{ item.title }}</span>
</p>
<!-- TODO -->
</li>
</ul>
</template>
<script>
export default {
name: 'TreeMenus',
props: {
data: {
type: Array,
default: () => [],
},
// 是否開啟節(jié)點(diǎn)可選擇
isSelect: {
type: Boolean,
default: false,
},
},
data() {
return {,
tapScopes: {},
scopes: {},
}
},
}
</script>
<style scoped>
...... some code ......
</style>展開收縮我們使用 CSS 來創(chuàng)建一個三角形:
.triangle {
width: 0;
height: 0;
border: 6px solid transparent;
border-left: 8px solid grey;
transition: all 0.1s;
left: 6px;
margin: 6px 0 0 0;
}然后定義一個展開時的 class，旋轉(zhuǎn)角度調(diào)整一下定位：
.caret-down {
transform: rotate(90deg);
left: 2px;
margin: 9px 0 0 0;
}
由于每個節(jié)點(diǎn)控制展開閉合的變量都是獨(dú)立的，為了不污染數(shù)據(jù)，這里我們定義一個對象 tapScopes 來控制就好，記得使用 $set 來讓視圖響應(yīng)變化:
// 當(dāng)點(diǎn)擊三角形時，圖標(biāo)變化：
changeStatus(index) {
this.$set(this.tapScopes, index, this.tapScopes[index] ? (this.tapScopes[index] === 'open' ? 'close' : 'open') : 'open')
}遞歸渲染
現(xiàn)在我們只渲染了第一層數(shù)據(jù)，如何循環(huán)渲染下一級數(shù)據(jù)呢，其實(shí)很簡單，往上面 TODO 的位置插入組件自身即可（相當(dāng)于引入了自身作為 components），只要組件設(shè)置了 name 屬性，
Vue 就可以調(diào)用該組件，：
<li v-for="(item, index) in data">
// .... some code ....
<tree-menus :data="item.children" v-bind="$props" />
</li>
<script>
export default {
name: 'TreeMenus'
// .... some code ....遞歸組件接收相同的 props 我們不必一個個傳遞，可以直接寫成 v-bind="$props" 把代理的 props 對象傳進(jìn)去（比如上面定義的 isSelect 就會被一直傳遞），只不過 data 被我們覆寫成了循環(huán)的下一級。最后使用 v-show 控制一下展開閉合的效果，基本的交互就實(shí)現(xiàn)出來了：
 |  |
|---|
定義參數(shù)
樹形結(jié)構(gòu)數(shù)據(jù)一般都是如下的 嵌套結(jié)構(gòu)，再復(fù)雜也只不過是字段變多了而已，這幾個 特征字段 是肯定存在的：key、label、children，以下面的參考數(shù)據(jù)為例: 這里的 key 是 id，用于標(biāo)識唯一性(該字段在整棵樹中是唯一的)，label 則是 title 字段，用于顯示節(jié)點(diǎn)名稱，最后的 children 則是指下一級節(jié)點(diǎn)，它的特征與父級一致。
[
{
id: 1,
title: "",
children: [{
id: 2,
title: "",
children: ......
}]
}
]所以我們的選擇器組件可以定義一個關(guān)鍵參數(shù)選項(xiàng)，用于指定節(jié)點(diǎn)中的這幾個屬性值。
props: {
// ... some code ....
props: {
type: Object,
default: () => {
return {
children: 'children',
label: 'title',
key: 'id',
}
},
},
},組件中的一些關(guān)鍵參數(shù)都修改成動態(tài)的形式:
:key="index" => :key="item[props.key]"
:data="item.children" => :data="item[props.children]"
{{ item.title }} => {{ item[props.label] }}實(shí)現(xiàn)點(diǎn)擊事件
現(xiàn)在我們來實(shí)現(xiàn)一個點(diǎn)擊事件 node-click: 為節(jié)點(diǎn)綁定一個 click 事件，點(diǎn)擊后觸發(fā) $emit 把節(jié)點(diǎn)對象傳進(jìn)方法中即可:
<span class="title" @click="tap(item, index)"> ... </span>
methods: {
tap(item, index) {
this.$emit('node-click', item)
}
.........
// 調(diào)用時:
<Tree @node-click="handle" :data="treeData" />
methods: {
handle(node) {
console.log('點(diǎn)擊節(jié)點(diǎn) Data : ', node)
}
.......這時問題來了，由于組件是遞歸嵌套的，如何在子節(jié)點(diǎn)中點(diǎn)擊時也能觸發(fā)最外層的事件呢？這時就需要利用 Vue 提供的 $listeners 這個 property，配合 v-on="$listeners" 將所有的事件監(jiān)聽器指向組件中循環(huán)的子組件：
<tree-menus .... v-on="$listeners"></tree-menus>
往組件中定義任何其它方法，都可以像這樣正常觸發(fā)到調(diào)用它的組件那里。
完整代碼
Tree.vue
<template>
<ul class="treeMenu">
<li v-for="(item, index) in data" :key="item[props.key]">
<i v-show="item[props.children]" :class="['triangle', carets[tapScopes[index]]]" @click="changeStatus(index)" />
<p :class="['treeNode', { 'treeNode--select': item.onSelect }]">
<label class="checkbox-wrap" @click="checked(item)">
<input v-if="isSelect" v-model="item.checked" type="checkbox" class="checkbox" />
</label>
<span class="title" @click="tap(item, index)">{{ item[props.label] }}</span>
</p>
<tree-menus v-show="scopes[index]" :data="item[props.children]" v-bind="$props" v-on="$listeners"></tree-menus>
</li>
</ul>
</template>
<script>
const CARETS = { open: 'caret-down', close: 'caret-right' }
export default {
name: 'TreeMenus',
props: {
data: {
type: Array,
default: () => [],
},
isSelect: {
type: Boolean,
default: false,
},
props: {
type: Object,
default: () => {
return {
children: 'children',
label: 'title',
key: 'id',
}
},
},
},
data() {
return {
carets: CARETS,
tapScopes: {},
scopes: {},
}
},
methods: {
operation(type, treeNode) {
this.$emit('operation', { type, treeNode })
},
tap(item, index) {
this.$emit('node-click', item)
},
changeStatus(index) {
this.$emit('change', this.data[index])
// 圖標(biāo)變化
this.$set(this.tapScopes, index, this.tapScopes[index] ? (this.tapScopes[index] === 'open' ? 'close' : 'open') : 'open')
// 展開閉合
this.$set(this.scopes, index, this.scopes[index] ? false : true)
},
async checked(item) {
this.$emit('checked', item)
},
},
}
</script>
<style scoped>
.treeMenu {
padding-left: 20px;
list-style: none;
position: relative;
user-select: none;
}
.triangle {
transition: all 0.1s;
left: 6px;
margin: 6px 0 0 0;
position: absolute;
cursor: pointer;
width: 0;
height: 0;
border: 6px solid transparent;
border-left: 8px solid grey;
}
.caret-down {
transform: rotate(90deg);
left: 2px;
margin: 9px 0 0 0;
}
.checkbox-wrap {
display: flex;
align-items: center;
}
.checkbox {
margin-right: 0.5rem;
}
.treeNode:hover,
.treeNode:hover > .operation {
color: #3771e5;
background: #f0f7ff;
}
.treeNode--select {
background: #f0f7ff;
}
.treeNode:hover > .operation {
opacity: 1;
}
p {
position: relative;
display: flex;
align-items: center;
}
p > .title {
cursor: pointer;
}
a {
color: cornflowerblue;
}
.operation {
position: absolute;
right: 0;
font-size: 18px;
opacity: 0;
}
</style>Mock.js
export default {
stat: 1,
msg: 'ok',
data: {
list: [
{
key: 1,
title: '一級機(jī)構(gòu)部門',
children: [
{
key: 90001,
title: '測試機(jī)構(gòu)111',
children: [
{
key: 90019,
title: '測試機(jī)構(gòu)111-2',
},
{
key: 90025,
title: '機(jī)構(gòu)機(jī)構(gòu)',
children: [
{
key: 90026,
title: '機(jī)構(gòu)機(jī)構(gòu)-2',
},
],
},
],
},
{
key: 90037,
title: '另一個機(jī)構(gòu)部門',
},
],
},
{
key: 2,
title: '小賣部總舵',
children: [
{
key: 90037,
title: '小賣部河邊分部',
},
],
},
],
},
}調(diào)用組件：
<template>
<div class="about">
<Tree :isSelect="isSelect" :data="treeData" @node-click="handle" @change="loadData" />
</div>
</template>
<script>
import Tree from '@/Tree.vue'
import json from '@/mock.js'
export default {
components: { Tree },
data() {
return {
treeData: [],
isSelect: false,
defaultProps: {
children: 'children',
label: 'title',
key: 'id',
},
}
},
created() {
this.treeData = json.data.list
},
methods: {
handle(node) {
console.log('點(diǎn)擊節(jié)點(diǎn) Data : ', node)
},
loadData(treeNode) {
console.log(treeNode)
// eg: 動態(tài)更新子節(jié)點(diǎn)
// treeNode.children = JSON.parse(JSON.stringify(json.data.list))
// this.treeData = [...this.treeData]
},
},
}
</script>到此這篇關(guān)于Vue實(shí)現(xiàn)無限級樹形選擇器的文章就介紹到這了,更多相關(guān)Vue選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法
今天小編就為大家分享一篇axios全局注冊,設(shè)置token,以及全局設(shè)置url請求網(wǎng)段的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue搜索頁開發(fā)實(shí)例代碼詳解（熱門搜索，歷史搜索，淘寶接口演示）
這篇文章主要介紹了vue搜索頁開發(fā)實(shí)例（熱門搜索，歷史搜索，淘寶接口演示）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程（一）
這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細(xì)教程（一）的相關(guān)資料,需要的朋友可以參考下2017-01-01
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue登錄注冊的相關(guān)實(shí)例內(nèi)容以及寫法分析，有需要朋友們可以學(xué)習(xí)下。2019-09-09
vue cli使用融云實(shí)現(xiàn)聊天功能的實(shí)例代碼
最近小編接了一個新項(xiàng)目，項(xiàng)目需求要實(shí)現(xiàn)一個聊天功能，今天小編通過實(shí)例代碼給大家介紹vue cli使用融云實(shí)現(xiàn)聊天功能的方法，感興趣的朋友跟隨小編一起看看吧2019-04-04
這篇文章主要介紹了vue中的proxy代理的用法(解決跨域問題)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
今天小編就為大家分享一篇對vue事件的延遲執(zhí)行實(shí)例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了Vuex的屬性和作用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要為大家介紹了keep?alive用法及原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
解決vue組件銷毀之后計(jì)時器繼續(xù)執(zhí)行的問題
這篇文章主要介紹了解決vue組件銷毀之后計(jì)時器繼續(xù)執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07