el-cascader-panel动态渲染省份传进去1201,120101,12怎么在el-descriptions-item变成地名
时间: 2023-07-22 11:25:44 浏览: 106
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
3星 · 编辑精心推荐
您可以使用第三方库如 `element-china-area-data` 来获取省市区的数据,然后根据代码中传递的省份编码,通过遍历数据匹配对应的省份名称,再通过递归查找对应的城市和区县名称,最后将这些名称设置到 `el-descriptions-item` 中即可。
具体实现可以参考以下代码示例:
```javascript
import areaData from 'element-china-area-data';
// 递归查找区域名称
function findAreaName(code, data) {
for (const item of data) {
if (item.value === code) {
return item.label;
}
if (item.children) {
const name = findAreaName(code, item.children);
if (name) return name;
}
}
return '';
}
// 获取省份名称
const provinceCode = '1201';
const provinceName = findAreaName(provinceCode, areaData);
// 获取城市名称
const cityCode = '120101';
const cityData = areaData.find(item => item.value === provinceCode)?.children || [];
const cityName = findAreaName(cityCode, cityData);
// 获取区县名称
const districtCode = '12';
const districtData = cityData.find(item => item.value === cityCode)?.children || [];
const districtName = findAreaName(districtCode, districtData);
// 将名称设置到 el-descriptions-item 中
this.data = [
{
label: '省份',
value: provinceName,
},
{
label: '城市',
value: cityName,
},
{
label: '区县',
value: districtName,
},
];
```
需要注意的是,以上代码仅供参考,具体实现需要根据您的业务场景进行调整。
阅读全文