随笔 - 19  文章 - 0  评论 - 1  阅读 - 8746

Element UI 中国省市区级联数据

1.下载:npm install element-china-area-data -S

2.按需导入:import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

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

3.案例

 
 
复制代码
 <el-form-item  label="交付地区" prop="province"  :rules=" form.contractStatus == '1' ? rules.province  : [{ required: false }]  " >
  <el-cascader  clearable class="dialog_form_width" size="large"  :options="regionOptions" v-model="selectedRegionOptions" @change="handleChangeRegion"> </el-cascader>
</el-form-item>

data() {
      return {
   regionOptions: regionData, 
        selectedRegionOptions: [], 
        form:{    
           province:"",
           city:"",
          area:""
        }
      };
    },
  methods: {
      /** 获取省市区 */
      handleChangeRegion() {
         this.form.province = CodeToText[this.selectedRegionOptions[0]];
         this.form.city = CodeToText[this.selectedRegionOptions[1]];
         this.form.area = CodeToText[this.selectedRegionOptions[2]];
      },
     
    /** 修改按钮,回显省市区 */
    handleUpdate() { 
   //  this.selectedOptions.push(TextToCode[this.form.provinces].code,TextToCode[this.form.provinces][this.form.city].code)
  this.selectedRegionOptions = [];
        if (
          this.form.province != "" &&
          this.form.province != undefined &&
          this.form.province != null
        ) {
          this.selectedRegionOptions.push(
            TextToCode[this.form.province].code,
            TextToCode[this.form.province][this.form.city].code,
            TextToCode[this.form.province][this.form.city][this.form.area].code
          );
        }
    },
  }
复制代码
4.点击修改时,将省市传过来,通过TextToCode转成code,这样才会回显省市
posted on   阿宇爱吃鱼  阅读(330)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示