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


Posted in Javascript onDecember 02, 2016

小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动。

调用示例:

<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: '中国',
 children: [{
  text: '陕西省',
  children: [{
  text: '西安市',
  children: [{
  text: '碑林区'
  }, {
  text: '雁塔区'
  }, {
  text: '未央区区'
  }, {
  text: '新城区'
  }]
  }, {
  text: '安康市'
  }, {
  text: '咸阳市',
  children: [{
  text: '秦都区'
  }, {
  text: '渭城区'
  }]
  }, {
  text: '渭南市'
  }]
 }, {
  text: '四川省',
  children: [{
  text: '成都市'
  }, {
  text: '绵阳市'
  }, {
  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组件tree实现省市多级联动

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的var_dump函数实现代码
Sep 07 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
Vue2实现组件props双向绑定
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 #Javascript
基于jQuery实现表格的排序
Dec 02 #Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 #Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 #Javascript
基于javascript实现的快速排序
Dec 02 #Javascript
You might like
转PHP手册及PHP编程标准
2006/12/17 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
JS简单生成随机数(随机密码)的方法
2017/05/11 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
深入浅出学习python装饰器
2017/09/29 Python
mac系统安装Python3初体验
2018/01/02 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Python基于locals返回作用域字典
2020/10/17 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
小学教研工作制度
2014/01/15 职场文书
合作经营协议书
2014/04/17 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
2014年质检员工作总结
2014/11/18 职场文书
如何写新闻稿
2015/07/18 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
python 经纬度求两点距离、三点面积操作
2021/06/03 Python