Vue.js组件树实现省市多级联动

小颖在上一篇随笔中写了两级的树，下面给大家再分享一下用ulli标签实现省市多级联动。

调用示例：

模板div树视图：模型='树数据'/树视图/div/模板脚本从导入树视图' ./treeview。vue ' export default { components : { treeview }，prop : { prop : }，method : { ready : function(){ }，data(){ return { treedata : { text : '地域，儿童：[{ text : }中国，儿童：[{ text : }陕西省，儿童：[{ text : }西安市，儿童：[{ text : }碑林区}，{ text: '雁塔区}，{ text: '未央区区}，{ text: '新城区}] }，{ text: '安康市}，{ text: '咸阳市，儿童：[{ text : }秦都区}，{ text: '渭城区}] }，{ text: '渭南市}] }，{ text: '四川省，儿童：[{ text : }成都市}，{ text: '绵阳市}，{ text: '广元市}] }，{ text: '安徽省}] }，{ text: '俄罗斯}]} } } } }/脚本组件代码：

样式李，型；}/样式模板Li div @ click=' toggle ' span v-if=' has leaks '[{ { 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 }，prop s : { model : { type : Object } }，methods 3: { toggle 3: function(){ this。open=！打开这个. } }，ready:函数(){}，computed : { hasleaves 3360函数(){返回此。模特。孩子们喜欢这个。模特。孩子们。length } }，data(){ return { open : false } }/script效果图：

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。