基于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 相关文章推荐
利用json获取字符出现次数的代码
Mar 22 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
vue登录注册实例详解
Sep 14 Javascript
微信小程序实现电影App导航和轮播
Nov 30 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
php使用递归函数实现数字累加的方法
2015/03/16 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python随机生成彩票号码的方法
2015/03/05 Python
遗传算法python版
2018/03/19 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python3 深浅copy对比详解
2019/08/12 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
运动会入场式解说词
2014/02/18 职场文书
商铺消防安全责任书
2014/07/29 职场文书
社团活动总结格式
2014/08/29 职场文书
离婚协议书格式
2014/11/21 职场文书
男方婚前保证书
2015/02/28 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
Golang 对es的操作实例
2022/04/20 Golang