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

Posted 2023-01-22 linab112

目录

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博客