VUE3+elementUI实现六位数地区编码数据库查询加载及保存

先展示

实现功能：通过六位数region编码，查询及保存，以及页面渲染地址

element-UI的el-cascader实现了地址渲染，具体如下

1.element-U提供了中国省市区三级地址，所以先用npm下载后导入

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

2.数据库我只存了六位数的regionId,六位数已经包含了省市区的地址，前两位是省份，前四位是省市，六位表示省市区，如’51’表示‘‘四川省’’ ，'5101’表示四川省成都市，'510101’省市区自己去搜。
详细代码如下：

import {regionData, codeToText} from 'element-china-area-data'
const options = ref(regionData)  //绑定地址数据


//element-UI  FORM表单
<el-form-item label="省市区" prop="regionId">
              <el-cascader
                  size="large"
                  :options="options"
                  v-model="form.regionId"
                  :props="{checkStrictly: 'true',emitPath:false}"
                  clearable
                  filterable
                  :style="{width: '100%'}"
              >

              </el-cascader>
</el-form-item>
              

3.el-cascader这个自己去了解下，由于我存的是六位数，所以会导致510000，510100这种没精确到区的数据无法加载，因此在绑定表单数据时还要进行数据监听

比如在新增修改按钮点击触发时，可以添加监听代码，代码如下：

watch(() => form.value.regionId, (newRegionId) => {
    let regionId = newRegionId;

    // 新增判断逻辑
    if (regionId && regionId.length === 6) {
      // 检查后四位为 '0000' 的情况
      if (regionId.endsWith('0000')) {
        regionId = regionId.slice(0, 2); // 只保留前四位
      }
      // 添加对后两位为 '00' 的情况处理
      else if (regionId.endsWith('00')) {
        regionId = regionId.slice(0, 4); // 只保留前两位
      }
      }
    }
    console.log(regionId);

    form.value.regionId = regionId;
  });

添加后便可以正确识别510000或510100这类省、市数据

但是会出现一个问题是如果只选择省或市，生成的region只有2位或者4位（你也可以强制让他们选择省市区，保证六位数），这样与我们数据库保存六位数的regionId不匹配，这时候我们要进行位数补全，省级补四个0，市级补两个0，代码如下：

function completeRegionId() {
  // 根据regionId的长度补全编码
  switch (form.value.regionId.length) {
    case 2: // 省级编码，需要补四位零
      form.value.regionId = form.value.regionId + '0000';
      break;
    case 4: // 市级编码，需要补两位零
      form.value.regionId = form.value.regionId + '00';
      break;
      // case 6: // 已经是六位，无需处理，此处可省略，因为不做任何改变
      //   break;
    
  }
}

将这个方法插入到提交方法里就行，或在后端业务层处理传入的regionId也可以。

---

更新：由于我后面的详细地址需要实现字符串拼接，所以需要将6位数的编码进行转地址操作，同理，使用codeToText来操作，因为codeToText操作的是数组，如果要直接操作需要传进去一个数组，我这儿只有一个编码，所以要进行操作，代码如下：

<el-table-column label="订单地址" align="center" :show-overflow-tooltip="true" width="200">
        <template #default="scope">
          {{ getcodeToText(scope.row.regionId)}} - {{ scope.row.houses }} - {{ scope.row.address }}
        </template>
      </el-table-column>
-------------------------------------------------------------------------------------

      
function  getcodeToText(regionId){

    let province = ''
    let city = ''
    let area = ''


    // 新增判断逻辑
    if (regionId && regionId.length === 6) {


      // if (!regionId.endsWith('0000')) {
      //   province = codeToText[regionId.slice(0, 2)] + '/'
      //   city = codeToText[regionId.slice(0, 4)] + '/'
      //   area = codeToText[regionId]
      //   }else{
      //   province = codeToText[regionId.slice(0, 2)]
      // }
      
      // 检查后两位为 '00' 的情况
      if (regionId.endsWith('0000')) {
        province = codeToText[regionId.slice(0, 2)]//保证只取省份，后面也不要“/”
      }
      // 添加对后四位为 '0000' 的情况处理
      else if (regionId.endsWith('00')) {
        province = codeToText[regionId.slice(0, 2)] + '/'
        city = codeToText[regionId.slice(0, 4)]
      }
      else {
        province = codeToText[regionId.slice(0, 2)] + '/'
        city = codeToText[regionId.slice(0, 4)] + '/'
        area = codeToText[regionId]

      }


    }
    return regionId = province + city+ area

}

注意：使用codeToText要用[]
效果图如下：

只选择省份：

选择省、市

选择省、市、区


有一个bug,就是现在有些地区地址编码有的地方更改后，这儿引用的数据不准确，会导致数据加载不出来，只能重新选择地区保存。