Vue的省份联动
一、安装依赖库
npm install element-china-area-data -S
npm install element-ui --save
全局使用elemntui组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);二 、代码如下
<template>
<div>
<el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="请选择省市区"></el-cascader>
<div>所选省市区: {{ selectedRegion }}</div>
<el-button type="primary" @click="fillInAddress">回填地址</el-button>
</div>
</template>
<script>
import { regionData } from "element-china-area-data"; // 引入
export default {
data() {
return {
options: regionData,
provinces: [],
selectedRegion: '' // 用于显示选中的省市区中文
};
},
methods: {
handleChange(value) {
const text = this.findTextByValue(value); // 调用方法查找选中的省市区的中文文本
this.selectedRegion = text;
},
// 根据选中的省市区代码查找对应的中文文本
findTextByValue(value) {
let text = '';
let data = regionData;
for (let i = 0; i < value.length; i++) {
const val = value[i];
const item = data.find(item => item.value === val);
if (item) {
text += item.label;
if (i !== value.length - 1) {
text += ' / ';
data = item.children || [];
}
}
}
return text;
},
// 将从数据库查询出来的地址回填到省份联动选择器中
fillInAddress() {
// 假设从数据库查询出来的地址是一个包含省、市、区的地址字符串
const address = "广东省 深圳市 南山区";
const addressArray = address.split(' ');
const valueArray = [];
let tempOptions = regionData;
for (let i = 0; i < addressArray.length; i++) {
const addressItem = addressArray[i];
const item = tempOptions.find(item => item.label === addressItem);
if (item) {
valueArray.push(item.value);
tempOptions = item.children || [];
}
}
this.provinces = valueArray;
}
}
};
</script>效果图
