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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
angularJS开发注意事项
May 26 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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开发中常用的8个小技巧
2008/08/27 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
python实现异步回调机制代码分享
2014/01/10 Python
python的keyword模块用法实例分析
2015/06/30 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
简单了解python的内存管理机制
2019/07/08 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
浅谈Python中的继承
2020/06/19 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
如何执行一个shell程序
2012/11/23 面试题
医药销售求职信范文
2014/02/01 职场文书
环保倡议书格式范文
2014/05/14 职场文书
2015年公司新年寄语
2014/12/08 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
学校运动会开幕词
2016/03/03 职场文书
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python