在vue3中使用vant
在安装vant的时候没有附带下载该地址列表,在使用时需要自己手动下载省市区数据

npm i @vant/area-data -D

安装完成之后在页面导入

import { areaList } from '@vant/area-data';

 <van-address-edit
      :area-list="areaList"
      :address-info="addressInfo"
      :show-delete="type === 'edit'"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
/>

在vue3中不需要const areaList，导入后直接使用

<script setup lang="ts">
import { areaList } from '@vant/area-data';
import type {AddressEditInfo} from 'vant'
import { ref, reactive, onMounted } from 'vue'
const type = ref('add')
const searchResult = ref([])
const addressInfo = reactive({})

const onSave = (address: AddressEditInfo) => {
  console.log(address)
}
const onDelete = () => {}