基于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 相关文章推荐
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 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 缓冲的免费实现方法
2006/10/09 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
医学护理系毕业生求职信
2013/10/01 职场文书
护士毕业生自荐信
2014/02/07 职场文书
班风口号
2014/06/18 职场文书
班级团队活动方案
2014/08/14 职场文书
委托书如何写
2014/08/30 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
公务员个人总结
2015/02/12 职场文书
房租涨价通知
2015/04/23 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书