基于基于vue2.0实现的级联选择器实现的级联选择器
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联
web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况：
单个级联 (下拉选择框，单选)
单个级联 (多项选择)
二级联动 （省份和城市联动）
三级联动 (省市区联动)
在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,
weixin_38655987
- 粉丝: 8
最新资源
- 关于ROS2的相关资料
- 功能强大的多物理场耦合分析软件.docx
- 十大考古骄傲了爱上了高科技索拉卡的感觉阿斯利康感觉拉萨扩大感觉
- 光接入网ODN网络.ppt
- 企业项目管理知识培训.ppt
- 软件测试用例分析-习题完美整合版汇总.doc
- 社会服务项目管理.ppt
- Linux系统下JDK1.8版本安装包下载与安装指南
- 数据库-考试大题.doc
- 财务管理：会计实务：Excel现金流量表的编制步骤-.pdf
- 理学电子与通信现代交换技术.pptx
- 汽车开发项目管理.ppt
- Backend-Boilerplates-前端工程化实战资源
- 项目管理绩效考核管理办法.doc
- 实习6--TCPIP网络协议配置.doc
- Voovan-开发者效率工具推荐及使用指南资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论1