1.选element ui 的Cascader级联选择器中的hover选择
<el-cascader
v-model="selectedOptions"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"></el-cascader>
2. 下载并注册依赖element-china-area-data,命令如下:(npm install XXX -S:命令指的是下载依赖并注册)
npm install element-china-area-data -S
3.引入element ui的依赖element-china-area-data 命令( 下载并注册依赖)
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
element ui的组件element-china-area-data包含有:
1.provinceAndCityData:省市二级联动数据(不带"全部"选项)
2.regionData:省市区三级联动数据(不带"全部"选项)
3.provinceAndCityDataPlus:省市区三级联动数据(带"全部"选项)
4.regionDataPlus:省市区三级联动数据(带"全部"选项)
这里的全选指的是value值是空字符串
CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']输出北京市;
TextToCode是个大对象,属性是汉字,属性值是区域码;
用法例如:TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
引用自https://blog.csdn.net/ld395353765/article/details/117037451
在data中添加:
data () {
return {
selectedOptions: [],
options: regionData,
form: {
provinces: '',
city: '',
area: ''
}}
在method方法中添加:
methods: {
handleChange () {
this.form.provinces = CodeToText[this.selectedOptions[0]]
this.form.city = CodeToText[this.selectedOptions[1]]
this.form.area = CodeToText[this.selectedOptions[2]]
}}
页面显示: