el-cascader三级联动回显 拿到code如何拿name 省市区返回一个字符串 比如:北京市顺义区
时间: 2024-10-08 08:23:09 浏览: 42
uniapp uView u-picker组件三级联动Demo
el-Cascader是一个基于Vue.js的下拉选择组件,它支持多级联动,当用户选择某个选项后,相关的层级信息会联动显示。如果你想要实现三级联动回显并且将选中的省市区名称组合成一个字符串,你可以这样做:
1. 首先,你需要在你的数据模型中存储每个级别的代码和名称,例如:
```javascript
data() {
return {
provinces: [
{ code: '01', name: '北京市' },
{ code: '02', name: '天津市' },
// 更多省...
],
cities: {}, // 存储市级数据,key为provinceCode(例如 '01'),value为city数组
districts: {}, // 存储区县级数据,key同上
selectedCode: ['01', '02', '03'], // 用户选择的三个级别代码,初始可能是空数组
};
}
```
2. 当用户选择了某一级别的选项,比如`selectedCode = ['01']`,你可以通过`cities`或`districts`对象找到对应的城市或区县数据。
3. 组合字符串的函数可以像这样编写:
```javascript
getAreaName(selectedCode) {
let result = '';
for (let i = 0; i < selectedCode.length; i++) {
const currentLevelData = this[`${selectedCode[i]}s`];
if (!currentLevelData || !currentLevelData.find(item => item.code === selectedCode[i])) {
break;
}
result += currentLevelData.find(item => item.code === selectedCode[i]).name + (i !== selectedCode.length - 1 ? ', ' : '');
}
return result.trim();
}
// 使用示例
this.getAreaName(this.selectedCode); // 输出 "北京市, 北京市顺义区"
```
4. 这里假设`getAreaName`函数会在每个级别的数据存在且有匹配项的情况下递归查找,如果没有则停止。
阅读全文