基于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 事件对象属性小结
Apr 27 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
jQuery参数列表集合
Apr 06 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
JS原生实现轮播图的几种方法
Mar 23 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设计模式之注册树模式分析
2018/01/26 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
js一组验证函数
2008/12/20 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
Python中的闭包总结
2014/09/18 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
python pygame实现五子棋小游戏
2020/10/26 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
工商治理实习生的自我评价
2014/01/15 职场文书
年终考核评语
2014/01/19 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
法定代表人授权委托书
2014/04/04 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
关于环保的广播稿
2015/12/17 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
python实现自动清理文件夹旧文件
2021/05/10 Python
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL