Element UI 中国省市区级联选择器(elementui中文网)

发布时间：2024-01-16

Element UI 中国省市区级联选择器

1.安装

2.说明

3.示例

1.安装npm install element-china-area-data -S2.说明

推荐整理分享Element UI 中国省市区级联选择器(elementui中文网)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:element ui cn,element_ui,element ui cn,elements ui官网,element-ui官网,element-ui官网,elementui中文网,elementui中文网,内容如对您有帮助，希望把文章链接给更多的朋友！

文档：element-china-area-data - npm

provinceAndCityData是省市二级联动数据（不带“全部”选项）regionData是省市区三级联动数据（不带“全部”选项）provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）regionDataPlus是省市区三级联动数据（带“全部”选项）“全部"选项绑定的value是空字符串”"CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText[‘110000’]输出北京市extToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出1101053.示例

(1)导入

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data' Element UI 中国省市区级联选择器(elementui中文网)

(使用)

<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); },

还可以实现四级联动，这里就不说明了

参照：

Element UI 中国省市区级联数据_最小的帆也能远航的博客-CSDN博客

本文链接地址:https://www.jiuchutong.com/zhishi/297722.html 转载请保留说明！

上一篇：警惕AI复制，几张图片就能实现视频伪造(ai复制命令)

下一篇：Vue语法与标签的使用(vue fragment标签)