基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联
web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况:
- 单个级联 (下拉选择框,单选)
- 单个级联 (多项选择)
- 二级联动 (省份和城市联动)
- 三级联动 (省市区联动)
在jquery中有很多好用的插件,比如select2,单选,多选的功能都具备。
本文探讨一下在vue中的实现级联选择器,自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性:
1 后端处理数据逻辑
这种情况是比较推荐的,大量的数据运算放在后端来进行,只需前后端商量好数据格式即可
一般的数据格式可能如下:
特点:数据之间层级嵌套,上下级的关系很清晰
2 前端处理数据逻辑
这种情况适合数据量较小的数据,或者由于某种原因后端只能返给你这种数据,那所有的数据处理就需要前端来操作,最终拼成的格式也与上述情况类似,只不过是多几个或少几个字段的问题。
数据格式可能会是这样:
30100,name: '长沙市',parentCode: 430000
},{
code: 430101,parentCode: 430100
},{
code: 430102,name: '芙蓉区',{
code: 430103,name: '天心区',{
code: 430104,name: '岳麓区',parentCode: 430100
}]
特点:数据格式是个平面表,每一条数据中都带有与之相对应的上下级关系。当我们查看某个数据的上下级时,都需要重新去遍历一遍数据。