目录
1.安装
npm install element-china-area-data -S
2.说明
文档：element-china-area-data - npm
- provinceAndCityData是省市二级联动数据（不带“全部”选项）
- regionData是省市区三级联动数据（不带“全部”选项）
- provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
- regionDataPlus是省市区三级联动数据（带“全部”选项）
- “全部"选项绑定的value是空字符串”"
- CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
- extToCode是个大对象，属性是汉字，属性值是区域码
用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
3.示例
(1)导入
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'(使用)
<el-form-item label="仓库地址" prop="addressJson">
<el-row>
<el-col :span="16">
<el-cascader :options="addressData" :disabled="false" @change="handleAddress"
style="width: 95%" v-model="addressSelections" placeholder="请选择省市区"></el-cascader>
</el-col>
<el-col :span="8">
<el-input v-model="form.detail" placeholder="请填写详细地址"/>
</el-col>
</el-row>
</el-form-item>options中的内容是绑定来源于导入的具体的数据，可以选择的类型参照说明中的内容，如下
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
//地址信息
addressData: regionData,
addressSelections: [],
warehouse: 'warehouse'
};
},change方法中编辑省市区的信息，当然也可以直接存储，主要是看你后端用什么来接受
handleAddress() {
for (let i = 0; i < this.addressSelections.length; i++) {
if (i == 0) {
this.form.province = CodeToText[this.addressSelections[i]]
}
if (i == 1) {
this.form.city = CodeToText[this.addressSelections[i]]
}
if (i == 2) {
this.form.town = CodeToText[this.addressSelections[i]]
}
}
},根据后端传来的数据进行省市区数据格式的还原。
getAddressInfo() {
this.addressSelections = [];
this.form.provinceCode = this.form.province ? TextToCode[this.form.province].code : "";
this.form.cityCode = this.form.city ? TextToCode[this.form.province][this.form.city].code : "";
this.form.townCode = this.form.town ? TextToCode[this.form.province][this.form.city][this.form.town].code : "";
this.addressSelections.push(this.form.provinceCode);
this.addressSelections.push(this.form.cityCode);
this.addressSelections.push(this.form.townCode);
},还可以实现四级联动，这里就不说明了
参照：