基于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 引发两次$(document.ready)事件
Jan 15 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
理解Javascript的call、apply
Dec 16 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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命令行写shell实例详解
2018/07/19 PHP
清空上传控件input file的值
2010/07/03 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python处理PHP数组文本文件实例
2014/09/18 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
Python分类测试代码实例汇总
2020/07/23 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
缴纳养老保险的证明
2014/01/10 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android
MySQL存储过程及语法详解
2022/08/05 MySQL