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)文章
這篇文章主要介紹了Vue.js單向綁定和雙向綁定,結(jié)合實(shí)例形式分析了vue.js單向綁定與雙向綁定相關(guān)原理、實(shí)現(xiàn)方法及操作技巧,需要的朋友可以參考下2018-08-08
VUE中如何動(dòng)態(tài)綁定類(lèi)名和樣式
這篇文章主要介紹了VUE中如何動(dòng)態(tài)綁定類(lèi)名和樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue2實(shí)現(xiàn)圖片的拖拽,縮放和旋轉(zhuǎn)效果的示例代碼
這篇文章主要為大家介紹了如何基于vue2?實(shí)現(xiàn)圖片的拖拽、旋轉(zhuǎn)、鼠標(biāo)滾動(dòng)放大縮小等功能。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以嘗試一下2022-11-11
vue項(xiàng)目打包后proxyTable代理失效問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目打包后proxyTable代理失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-05-05
這篇文章主要介紹了Vue路由自動(dòng)添加#的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)實(shí)例代碼
輸入框是使用非常多的元素,用來(lái)輸入用戶名、密碼等等信息,Element提供了功能和樣式豐富的輸入框,下面這篇文章主要給大家介紹了關(guān)于Elementui?el-input輸入框校驗(yàn)及表單校驗(yàn)的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式簡(jiǎn)單總結(jié)
在做開(kāi)發(fā)中都會(huì)遇到的需求,每個(gè)用戶的權(quán)限是不一樣的,那他可以訪問(wèn)的頁(yè)面(路由)可以操作的菜單選項(xiàng)是不一樣的,如果由后端控制,我們前端需要去實(shí)現(xiàn)動(dòng)態(tài)路由,動(dòng)態(tài)渲染側(cè)邊菜單欄,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式,需要的朋友可以參考下2024-02-02
antd-日歷組件,前后禁止選擇,只能選中間一部分的實(shí)例
這篇文章主要介紹了antd-日歷組件,前后禁止選擇,只能選中間一部分的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了12 種使用Vue 的最佳做法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue cli4環(huán)境變量和模式示例詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04