微客导航 » 文章资讯 » 基于vue2.0实现的级联选择器

基于vue2.0实现的级联选择器

2024-02-20 12:26:03 114

基于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,
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
}]

特点：数据格式是个平面表，每一条数据中都带有与之相对应的上下级关系。当我们查看某个数据的上下级时，都需要重新去遍历一遍数据。

如何在组件中使用

API

props type description origanization Array 级联数据源，格式必须按照第一种数据中的格式显示 value Array 选中中或默认值,可以直接用v-model语法糖，具体可以查看例子

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于vue2.0实现的级联选择器

热门推荐

随机推荐