Element UI 中国省市区级联数据 地址选择器 地址级联数据

  1. 安装
npm install element-china-area-data -S
  1. 使用

import { regionData, CodeToText, TextToCode } from 'element-china-area-data

regionData是省市区三级联动数据(不带“全部”选项)
CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
extToCode是个大对象,属性是汉字,属性值是区域码用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

3.CodeToText的使用
数据示例:codeStr=‘110000,110100,110101’, codeArray=[110000,110100,110101]

getCodeToText(codeStr, codeArray) {
      if (null === codeStr && null === codeArray) {
        return null;
      } else if (null === codeArray) {
        codeArray = codeStr.split(",");
      }

      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      return area;
    }
  1. TextToCode 的使用

    北京市/市辖区/东城区 转换成 110101在获取详情信息的接口中,使用TextToCode 将字符串转换成编码赋给 selectedOptions

this.selectedOptions = TextToCode[this.addForm.area.split(‘/’)[0]][this.addForm.area.split(‘/’)[1]][this.addForm.area.split(‘/’)[2]].code;

5 整体代码:省市三级联动(不带“全部”选项)

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
     // 在获取详情信息接口中使用 TextToCode 将字符串转换成编码赋给 selectedOptions 
    projectInfo () {
      var that = this;
      getProjectInfo({ token: getToken(), id: that.id }).then(res => {
        this.addForm = {
          id: res.id,
          // 基础信息
          p_name: res.p_name,   //项目名
          p_message: res.p_message,   //项目信息
          area: res.area,   //地区
          remark: res.remark,   //备注
        }
        this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code;

      }).catch(err => {
        Message.error(err)
      })
    },
      handleChange (value) {
	      console.log(value)
	      this.getCodeToText(null, value)
	    },
	   getCodeToText (codeStr, codeArray) {
	      if (null === codeStr && null === codeArray) {
	        return null;
	      } else if (null === codeArray) {
	        codeArray = codeStr.split(",");
	      }
	      let area = "";
	      switch (codeArray.length) {
	        case 1:
	          area += CodeToText[codeArray[0]];
	          break;
	        case 2:
	          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
	          break;
	        case 3:
	          area +=
	            CodeToText[codeArray[0]] +
	            "/" +
	            CodeToText[codeArray[1]] +
	            "/" +
	            CodeToText[codeArray[2]];
	          break;
	        default:
	          break;
	      }
	      console.log(area)
	      this.addForm.area = area
	      return area;
	    }
    }
  }
</script>

最后效果:
在这里插入图片描述
点击编辑后:在这里插入图片描述

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值