中国省市区地区选择组件（ElementPlus + Vue3 + TS ）

安装

npm install element-china-area-data -S

介绍

1.引用

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-dat

2.用法

provinceAndCityData：省市数据（不带“全部”选项）

regionData：省市区数据（不带“全部”选项）

provinceAndCityDataPlus：省市区数据（带“全部”选项）

regionDataPlus：省市区数据（带“全部”选项）

CodeToText：例如：CodeToText[‘110000’]输出北京市

TextToCode：例如：TextToCode[‘北京市’].code输出110000

代码

效果图

1.项目需要这种三个下拉选择框

2.选择地址

表单校验

//这里只展示地址选择部分
import type { FormRules } from 'element-plus'
export const FJRrules = reactive({
    adress:[
        {required: true,validator: addressValidator , trigger: 'change' }
    ],
})
const addressValidator = (rule: any, value: any, callback: any) => {
  if (!value) { //没有选择的情况
    return callback(new Error('请选择省/市/区'))
  }
  setTimeout(() => {
    if (!value.isComplete) { //没有选择完整
      callback(new Error('请完善地址'))
    } else {
      callback()
    }
  }, 100)
}