1.使用elementui级联选择器
<el-cascader
v-model="address"
:options="options"
@change="handleChange"
></el-cascader>
2.安装element-china-area-data
npm install element-china-area-data -S
3.在页面上引用
import { regionData } from 'element-china-area-data'
4.将regionData赋值给options
data() {
return {
options: regionData
};
},
效果图:
完整代码:
<template>
<div>
<el-cascader
v-model="address"
:options="options"
@change="handleChange"
></el-cascader>
</div>
</template>
<script>
import { regionData } from 'element-china-area-data'
export default {
data() {
return {
address:[],
options: regionData
};
},
methods: {
handleChange(val){
console.log(val)
}
}
};
</script>
<style scoped>
</style>
element-china-area-data安装/实例/使用:
https://github.com/Plortinus/element-china-area-data
想使用其他技术或方法可以借阅: