element-china-area-data 城市名如何显示
时间: 2023-08-08 20:08:32 浏览: 45
element-china-area-data 是一个基于 Element UI 的城市级联选择器组件,其中的城市名是以对象的形式存储的。如果你想要在界面中显示城市名,可以通过以下方式获取:
1. 使用 v-model 双向绑定获取当前所选城市的 code;
2. 遍历城市数组,找到 code 对应的城市对象;
3. 获取该城市对象的 name 属性,即可得到城市名。
示例代码如下:
```
<template>
<div>
<el-cascader
v-model="selectedCityCode"
:options="cityOptions"
@change="handleChange"
placeholder="请选择城市"
></el-cascader>
<div>所选城市:{{ selectedCityName }}</div>
</div>
</template>
<script>
import cityData from 'element-china-area-data'
export default {
data() {
return {
cityOptions: cityData,
selectedCityCode: [],
selectedCityName: ''
}
},
methods: {
handleChange(value) {
this.selectedCityName = this.getCityName(value)
},
getCityName(code) {
let cityName = ''
for (let province of this.cityOptions) {
for (let city of province.children) {
if (city.value === code[1]) {
cityName = city.label
break
}
}
}
return cityName
}
}
}
</script>
```
在上面的示例中,我们使用了 element-china-area-data 提供的城市数组 cityData 作为城市级联选择器的选项。通过 v-model 双向绑定获取当前所选城市的 code,并在 handleChange 方法中调用 getCityName 方法获取城市名。getCityName 方法中,我们根据所选城市的 code,遍历城市数组,找到对应的城市对象,并返回该对象的 name 属性,即可得到城市名。最后,在界面中展示所选城市的名字。