Vue3 introduces provinces, cities and regions to select element-china-area-data and page echo

1. Install element-china-area-data

npm i element-china-area-data

2. introduce

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

3. Defined in the file to use

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

const userForm = reactive({
  areaCode: "",
  cityCode: "",
  provinceCode: "",
});

//regionData是不带全部，regionDataPlus带全部选项
//如果需要使用regionDataPlus，记得引入
const options = ref(regionData);
const selectedOptions = ref([]);

const handleChange = () => {
  if (
    selectedOptions.value[0] != null &&
    selectedOptions.value[1] != null &&
    selectedOptions.value[2] != null
  ) {
   //这里可以根据你需要的数据格式来设置省市区显示
    userForm.provinceCode = selectedOptions.value[0];
    userForm.cityCode = selectedOptions.value[1];
    userForm.areaCode = selectedOptions.value[2];
  }
};

4. Page display and selection echo

<el-form-item :label="$t('common.location')">
     <el-cascader
         v-if="!isShowEdit"
         size="large"
         class="profile-cascader"
         :options="options"
         v-model="selectedOptions"
         @change="handleChange"
      />
      <div v-else>
        {
    
    { CodeToText[userInfo?.provinceCode] }} /
        {
    
    { CodeToText[userInfo?.cityCode] }} /
        {
    
    { CodeToText[userInfo?.areaCode] }}
        </div>
 </el-form-item>

5. Show results