先上代码
<template>
<el-cascader
ref="cascader"
size="large"
change-on-select
:options="options"
v-model="searea"
@change="handleChange"
>
</el-cascader>
</template>
<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
components: {
tree,
Searchname
},
data() {
return {
options: regionData,
searea: "",
};
},
methods: {
//城市选择
handleChange(e) {
console.log(e)
//直接输出数组
//可以转换为对应的城市编码TextToCode,或将城市转换为名称CodeToText
},
},
mounted() {
//城市选择配置
setInterval(function() {
document.querySelectorAll(".el-cascader-node__label").forEach(el => {
el.onclick = function() {
if (this.previousElementSibling) this.previousElementSibling.click();
};
});
}, 1000);
}
};
</script>
1,安装省市区插件
npm install element-china-area-data -S
//引用
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
2,省市区插件介绍
provinceAndCityData是省市二级联动数据(不带“全部”选项)
regionData是省市区三级联动数据(不带“全部”选项)
provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
regionDataPlus是省市区三级联动数据(带“全部”选项)
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
需要什么方法或值,就在引用时加入进去
3,正常情况需要选到最后一级才行,增加上文(城市选择配置)的代码,可实现单独选择某一级,例如只选择省,或者只选择市