基于vue2.0实现的级联选择器
时间:2019-03-30
本文章向大家介绍基于vue2.0实现的级联选择器,主要包括基于vue2.0实现的级联选择器使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联
web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况:
- 单个级联 (下拉选择框,单选)
- 单个级联 (多项选择)
- 二级联动 (省份和城市联动)
- 三级联动 (省市区联动)
在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备。
本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性:
1 后端处理数据逻辑
这种情况是比较推荐的,大量的数据运算放在后端来进行,只需前后端商量好数据格式即可
一般的数据格式可能如下:
[{ value: 'beijing', label: '北京', children: [{ value: 'chaoyang', label: '朝阳' }, { value: 'haidian', label: '海淀' }, { value: 'changping', label: '昌平' }, { value: 'shunyi', label: '顺义' }] }, { value: 'shanghai', label: '上海', children: [{ value: 'baoshan', label: '宝山' }, { value: 'jiading', label: '嘉定' }, { value: 'songjiang', label: '松江' }, { value: 'pudong', label: '浦东' }] }]
特点:数据之间层级嵌套,上下级的关系很清晰
2 前端处理数据逻辑
这种情况适合数据量较小的数据,或者由于某种原因后端只能返给你这种数据,那所有的数据处理就需要前端来操作,最终拼成的格式也与上述情况类似,只不过是多几个或少几个字段的问题。
数据格式可能会是这样:
[{ code: 420000, name: '湖北省', parentCode: 0 }, { code: 420100, name: '武汉市', parentCode: 420000 }, { code: 420101, name: '市辖区', parentCode: 420100 }, { code: 420102, name: '江岸区', parentCode: 420100 }, { code: 420103, name: '江汉区', parentCode: 420100 }, { code: 420104, name: '?口区', parentCode: 420100 }, { code: 420105, name: '汉阳区', parentCode: 420100 }, { code: 421000, name: '荆州市', parentCode: 420000 }, { code: 421001, name: '市辖区', parentCode: 421000 }, { code: 421002, name: '沙市区', parentCode: 421000 }, { code: 421003, name: '荆州区', parentCode: 421000 }, { code: 430000, name: '湖南省', parentCode: 0 }, { code: 430100, name: '长沙市', parentCode: 430000 }, { code: 430101, name: '市辖区', parentCode: 430100 }, { code: 430102, name: '芙蓉区', parentCode: 430100 }, { code: 430103, name: '天心区', parentCode: 430100 }, { code: 430104, name: '岳麓区', parentCode: 430100 }]
特点:数据格式是个平面表,每一条数据中都带有与之相对应的上下级关系。当我们查看某个数据的上下级时,都需要重新去遍历一遍数据。
如何在组件中使用
<div class="hello"> <form-organization :organization="organization" v-model="seleted"></form-organization> </div> <script> import FormOrganization from '@/components/FormOrganization' export default { name: 'hello', data () { return { seleted: [], organization: [{ value: 'beijing', label: '北京' }, { value: 'shanghai', label: '上海' }, { value: 'shenzhen', label: '深圳' }, { value: 'hangzhou', label: '杭州' }, { value: 'zhengzhou', label: '郑州' }, { value: 'guangzhou', label: '广州' }, { value: 'xiamen', label: '厦门' }] } }, components: { FormOrganization } } </script>
API
props | type | description |
---|---|---|
origanization | Array | 级联数据源,格式必须按照第一种数据中的格式显示 |
value | Array | 选中中或默认值,可以直接用v-model语法糖,具体可以查看例子 |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- H5动画开发快车道
- Open vSwith模拟网关实现不同子网的互通
- 总结了一些指针易出错的常见问题(二)
- 史上最清晰的红黑树讲解(上)
- C++之new/delete/malloc/free详解
- 验证 结构体指针与自增运算符
- Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失下篇
- ONOS1.3.0集群实验
- Spring Boot下的TDD(测试驱动开发)
- MySQL的索引是什么?怎么优化?
- C语言之函数
- ElasticSearch搜索引擎在SpringBoot中的实践
- 消费者驱动的微服务契约测试套件Spring Cloud Contract
- 使用Spring Boot开发一个Spring Mobile程序
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PyQt5 技术篇-鼠标移动控件显示提示,Qt Designer控件提示设置方法。
- PyQt5 技术篇-窗口名、窗口图标的设置方法。
- 101个shell脚本
- PyQt5 图片兼容性问题:"libpng warning: bKGD: invalid.",原因及解决办法。
- 编程语言经典小例题—Python版【持续更新】
- Python+selenium 自动化-切换窗口页签、切换iframe框架。确定页面是否包含iframe方法。
- JavaScript 技术篇-js获取iframe内的元素方法。
- QQ二维码登录API源码
- JavaScript 技术篇-js获取document的几种方式,js获取dom元素的常用方法。
- 不好意思,我膨胀了!shader 入门精要!Cocos Creator 3D Shader !
- JavaScript 技术篇-js获取dom节点、html标签自定义属性的值。
- 测试 APP 抓不到数据包该怎么办
- 手把手教你搭建SSM框架(Eclipse版)
- 【手把手教你】使用pyfinance进行证券收益分析
- [English] Creating a New Theme