vue将地区以对象、数组的格式传给后端
2024-10-20 13:36:09
项目涉及到了一个地区筛选，同时省市区三级不进行关联，后端要求以对象包数组的格式传参，完整代码
1、先拿到接口返回的地区数据
对数据进行处理，拿到想要的格式
this.provinceOption =res.data.map((item) => {
let name = '';
if (item.name.includes('内蒙古') || item.name.includes('黑龙江')) {
name = item.name.slice(0, 3);
} else {
name = item.name;
}
return {
...item,
name,
};
});
2、vue用element级联选择器插件渲染
<el-cascader v-model="search.area" placeholder="请选择" @change="areaChange" @visible-change="enpVisibleChange"
:options="provinceOption" filterable clearable collapse-tags :props="{
multiple: true,
checkStrictly: true,
label: 'name',
value: 'name',
expandTrigger: 'hover',
children: 'nextLevel',
}" size="midium">
</el-cascader>
重点来了，将插件返回的数据进行处理
思路：先将每个数组的第一项存起来，将他们转为对象的key，然后再将数组的第二项作为对象中的key,第三项存到对应的数组中
3、将选中的地区返回的数据进行处理，改成接口需要的参数格式
areaChange() {
const countryArray = [];
const countryList = {}
this.search.area.forEach(item => {
if (!countryArray.includes(item[0])) {
countryArray.push(item[0])
}
})
if (countryArray.length > 0) {
countryArray.forEach(item => {
countryList[item] = {}
if (item.includes('市')) {
countryList[item][item] = []
}
this.search.area.forEach(areaItem => {
if (areaItem.length === 2 && areaItem[0].includes('市')) {
if (item === areaItem[0]) {
areaItem.forEach(areaItemChild => {
if (item !== areaItemChild && !countryList[item][item].includes(areaItemChild)) {
countryList[item][item].push(areaItemChild)
}
})
}
} else if (areaItem.length >= 2 && item === areaItem[0]) {
if (!countryList[item][areaItem[1]]) {
countryList[item][areaItem[1]] = []
}
areaItem.forEach(areaItemChild => {
if (item !== areaItemChild && !countryList[item][areaItem[1]].includes(areaItemChild) && areaItem[1] !== areaItemChild) {
countryList[item][areaItem[1]].push(areaItemChild)
}
})
}
})
})
}
this.search.countryList = countryList;
if (!this.enpVisible) {
this.policySearchList();
}
},
以上就是完整的代码和步骤
最新文章
- python笔记：windows 下安装 python lxml
- cookie实现记住密码
- 【转载】[jquery.validate]自定义方法实现"手机号码或者固定电话"的逻辑验证
- python项目练习3：万能的XML
- Appium原理
- npm更换淘宝镜像
- [Powershell] 检查IIS设置
- STL中的set集合容器进行集合运算：并、交、差实例
- 邓_php面试【002】——完整版
- zabbix监控-部署(一)
- V7000数据恢复（存储文件系统损坏）案例_北亚数据恢复
- Docker最全教程——Redis容器化以及排行榜实战（十三）
- JAVA集合类兄妹List和Set
- Xamarin for Visual Studio下载后的文件路径
- C# Json 和对象的相互转换
- day13_雷神_前端01
- 介绍python中运算符优先级
- 加拿大大学排名 by USNews
- CMSZU站群管理系统 升级到 v1.8 [源码下载]
- Java File.separator