基于vue2.0实现的级联选择器


Posted in Javascript onJune 09, 2017

基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联

web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况:

  1. 单个级联 (下拉选择框,单选)
  2. 单个级联 (多项选择)
  3. 二级联动 (省份和城市联动)
  4. 三级联动 (省市区联动)

在jquery中有很多好用的插件,比如select2, 单选,多选的功能都具备。

本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性:

预览地址

github地址

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语法糖,具体可以查看例子

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

Javascript 相关文章推荐
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
js实现中文实时时钟
Jan 15 Javascript
JavaScript设计模式之代理模式详解
Jun 09 #Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 #Javascript
vue2 中如何实现动态表单增删改查实例
Jun 09 #Javascript
JS创建Tag标签的方法详解
Jun 09 #Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 #Javascript
JS实现的随机排序功能算法示例
Jun 09 #Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
You might like
Syphon 秘笈
2021/03/03 冲泡冲煮
桌面中心(四)数据显示
2006/10/09 PHP
利用 window_onload 实现select默认选择
2006/10/09 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
session 加入redis的实现代码
2016/07/15 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
jquery实现下载图片功能
2019/07/18 jQuery
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python中防止sql注入的方法详解
2017/02/25 Python
python 用下标截取字符串的实例
2018/12/25 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
python selenium操作cookie的实现
2020/03/18 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
Django实现简单的分页功能
2021/02/22 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
《分一分》教学反思
2014/04/13 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL