Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)
更新時(shí)間：2022年07月15日 15:30:52 作者：愛(ài)喝酸奶的吃貨
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
小穎在上一篇隨筆中寫(xiě)了兩級(jí)的tree，下面給大家再分享一下用<ul><li>標(biāo)簽實(shí)現(xiàn)省市多級(jí)聯(lián)動(dòng)。
調(diào)用示例:
<template>
<div>
<treeview :model='treedata'></treeview>
</div>
</template>
<script>
import treeview from './TreeView.vue'
export default {
components: {
treeview
},
props: {
},
method:{
},
ready:function(){
},
data(){
return {
treedata:{text:'地域',
children: [{
text: '中國(guó)',
children: [{
text: '陜西省',
children: [{
text: '西安市',
children: [{
text: '碑林區(qū)'
}, {
text: '雁塔區(qū)'
}, {
text: '未央?yún)^(qū)區(qū)'
}, {
text: '新城區(qū)'
}]
}, {
text: '安康市'
}, {
text: '咸陽(yáng)市',
children: [{
text: '秦都區(qū)'
}, {
text: '渭城區(qū)'
}]
}, {
text: '渭南市'
}]
}, {
text: '四川省',
children: [{
text: '成都市'
}, {
text: '綿陽(yáng)市'
}, {
text: '廣元市'
}]
}, {
text: '安徽省'
}]
}, {
text: '俄羅斯'
}]}}
}
}
</script>
組件代碼:
<style scoped>
ul,li{
list-style-type: none;
}
</style>
<template>
<li>
<div @click='toggle'><span v-if='hasLeaves'>[{{open ? '-' : '+'}}]</span>{{model.text}}</div>
<ul>
<treeview v-for='model in model.children' :model='model' v-show='open'></treeview>
</ul>
</li>
</template>
<script>
export default {
name: 'treeview',
props: {
model: {
type: Object
}
},
methods: {
toggle:function(){
this.open=!this.open;
}
},
ready: function() {},
computed:{
hasLeaves: function() {
return this.model.children && this.model.children.length
}
},
data() {
return {
open: false
}
}
}
</script>
效果圖：
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中結(jié)合ElementPlus實(shí)現(xiàn)彈窗的封裝方式
這篇文章主要介紹了Vue3中結(jié)合ElementPlus實(shí)現(xiàn)彈窗的封裝方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue中select下拉框的默認(rèn)選中項(xiàng)的三種情況解讀
這篇文章主要介紹了Vue中select下拉框的默認(rèn)選中項(xiàng)的三種情況解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue封裝Axios請(qǐng)求和攔截器的步驟，幫助大家更好的對(duì)axios進(jìn)行封裝并將接口統(tǒng)一管理，同時(shí)為請(qǐng)求和響應(yīng)設(shè)置攔截器interceptors。，感興趣的朋友可以了解下2020-09-09
vue如何關(guān)閉eslint檢測(cè)(多種方法)
我們?cè)陂_(kāi)發(fā)vue項(xiàng)目的時(shí)候，創(chuàng)建的時(shí)候可能會(huì)不小心選擇了eslint，所以如果不想讓eslint檢測(cè)，我們?cè)撛趺崔k呢，本文就詳細(xì)的介紹了幾種關(guān)閉方法，感興趣的可以了解一下2021-12-12
基于Vue實(shí)現(xiàn)簡(jiǎn)單的貪食蛇游戲
貪食蛇是一個(gè)非常經(jīng)典的游戲,?在游戲中,?玩家操控一條細(xì)長(zhǎng)的直線(xiàn),?它會(huì)不停前進(jìn),?玩家只能操控蛇的頭部朝向,?一路拾起觸碰到之物。本文將用Vue實(shí)現(xiàn)這一游戲，感興趣的可以嘗試一下2022-04-04
本篇文章主要介紹了Vue2.0組件間數(shù)據(jù)傳遞示例，組件間數(shù)據(jù)傳遞主要是父子組件之間傳遞，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03
這篇文章主要介紹了Vue混入mixins滾動(dòng)觸底的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue3使用TypeIt實(shí)現(xiàn)文字打字機(jī)效果的代碼示例
在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中,文字打字機(jī)效果是一種非常流行的動(dòng)畫(huà)效果,能夠吸引用戶(hù)的注意力并提升用戶(hù)體驗(yàn),本文將介紹如何在 Vue 3 中使用 TypeIt 庫(kù)實(shí)現(xiàn)文字打字機(jī)效果,并分享一些實(shí)用的技巧和示例,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue彈窗父子組件調(diào)用問(wèn)題，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue+swiper實(shí)現(xiàn)左右滑動(dòng)的測(cè)試題功能
這篇文章主要介紹了vue+swiper實(shí)現(xiàn)左右滑動(dòng)的測(cè)試題功能,本文通過(guò)實(shí)例代碼給大介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10