基于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 动态创建VML的方法
Oct 14 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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的FTP学习(二)[转自奥索]
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
全面理解Python中self的用法
2016/06/04 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
浅析Python 序列化与反序列化
2020/08/05 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
恶意软件的定义
2014/11/12 面试题
聘任书的写作格式及范文
2014/03/29 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
病危通知书样本
2015/04/17 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android