ElementUI实现一个省市区cascader
介绍
近期有使用到 ElementUI 框架,为此基于其中 cascader
组件做了一个省市区级联选择功能。
Git地址:https://gitee.com/ychizzz/element-ui-city-selector
ElementUI-cascader组件:https://element.eleme.cn/2.0/#/zh-CN/component/cascader#cascader-ji-lian-xuan-ze-qi
代码实现
<!-- CitySelector.vue -->
<template>
<div class="city_selector">
<el-cascader
:options="regionData"
v-model="selectedOptions"
@change="handleChange"
:clearable="true"
:placeholder="'请选择省/市/区县'"
>
</el-cascader>
</div>
</template>
<script>
import regionData from "../js/index";
export default {
name: "CitySelector",
data() {
return {
regionData,
selectedOptions: [],
};
},
methods: {
handleChange() {
},
}
}
</script>
<style scoped>
</style>
// index.js
import DATA from './pro_city_dis' // 省市区县数据源
const provinceData = DATA[100000] // provinceData拿到数据源中的全部的省份
const regionData = [] // 用于存放格式正确的省/市/区县数据,最终需要export出去
// 省
for (const provinceCode in provinceData) { // provinceCode拿到省份编码
regionData.push({
value: provinceCode,
label: provinceData[provinceCode]
})
}
// 市
for (const provinceObj of regionData) { // provinceObj拿到regionData中的省份对象
// 需要给provinceObj添加children属性,以激活市级select框
let city = []
for (const cityCode in DATA[provinceObj.value]) { // DATA[provinceObj.value]拿到数据源所有的市,cityCode拿到所有市的编码
city.push({
value: cityCode,
label: DATA[provinceObj.value][cityCode]
})
if (city.length) { // 排除掉不存在市的省份
provinceObj.children = city // 添加children属性,激活市级select框
}
}
}
// 区县
for (const provinceObj of regionData) { // provinceObj拿到regionData中的省份对象
let cityObj = provinceObj.children // cityObj拿到每个省份下的所有市
if (cityObj) { // 因为“海外”选项没有市级,所有需要排除
for (const city of cityObj) { // city拿到每个市
// 给city添加children属性,以激活区/县select框
let district = []
for (const districtCode in DATA[city.value]) { // districtCode拿到对应市下所有区县
district.push({
value: districtCode,
label: DATA[city.value][districtCode]
})
}
if (district.length) {
city.children = district
}
}
}
}
export default regionData
数据源查看:https://gitee.com/ychizzz/element-ui-city-selector/blob/master/src/js/pro_city_dis.js
实现效果
以上就是全部内容,希望对大家学习有帮助!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步