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

迷南。 2023-09-27 13:58 140阅读 0赞

**目录**

1.安装

2.说明

3.示例

--------------------

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

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

参照：

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

[element-china-area-data - npm]: https://www.npmjs.com/package/element-china-area-data
[Element UI _-CSDN]: https://blog.csdn.net/weixin_44364444/article/details/119856652