基于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 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
H5实现仿flash效果的实现代码
Sep 29 Javascript
安装vue-cli的简易过程
May 22 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
React实现轮播效果
Aug 25 Javascript
vue实现井字棋游戏
Sep 29 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
javascript闭包入门示例
2014/04/30 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
关于vue面试题汇总
2018/03/20 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
python集合用法实例分析
2015/05/30 Python
Python写入CSV文件的方法
2015/07/08 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python调用Redis的示例代码
2020/11/24 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
递归计算如下递归函数的值(斐波拉契)
2012/02/04 面试题
保密普查工作实施方案
2014/02/25 职场文书
《散步》教学反思
2014/03/02 职场文书
租房协议书范本
2014/04/09 职场文书
街道社区活动报告
2015/02/05 职场文书
同意报考证明
2015/06/17 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
java实现对Hadoop的操作
2021/07/01 Java/Android
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs