基于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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
微信小程序实现watch监听
Jun 04 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 mcrypt可逆加密算法分析
2011/07/19 PHP
yii分页组件用法实例分析
2015/12/28 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
js 上传图片预览问题
2010/12/06 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
python实现比较两段文本不同之处的方法
2015/05/30 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
经典演讲稿范文
2013/12/30 职场文书
高中体育教学反思
2014/01/29 职场文书
大学生个人自荐信
2014/02/24 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
2016国庆促销广告语
2016/01/28 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android