Vant

Vant官网–点击跳转
作用：地址编辑组件，用于新建、更新、删除地址信息。
在main.js引入：

// 引入地址编辑
import { AddressEdit } from 'vant';
// 省市区
import { Area } from 'vant';

// 省市区
Vue.use(Area);

// 地址编辑
Vue.use(AddressEdit);

基础用法：

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

//2023.8.24号更改为:
<van-address-edit
        :area-list="areaList"
        :address-info="AddressInfo"
        show-delete
        show-set-default
        show-search-result
        show-area
        show-detail
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave($event)"
        @delete="onDelete($event)"
/>

实现点击编辑按钮 弹出地址编辑

          <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '70%' }"
          >
            <van-address-edit
              :area-list="areaList"
              :address-info="AddressInfo"
              show-delete
              show-set-default
              show-search-result
              show-area
              :search-result="searchResult"
              :area-columns-placeholder="['请选择', '请选择', '请选择']"
              @save="onSave"
              @delete="onDelete"
              @change-detail="onChangeDetail(AddressInfo)"
            />
          </van-popup>


//2023.8.24号更改为:
 <van-popup
       v-model="show"
       position="bottom"
       :style="{ height: '70%' }"
     >
       <!-- {{ AddressInfo }} -->
       <van-address-edit
         :area-list="areaList"
         :address-info="AddressInfo"
         show-delete
         show-set-default
         show-search-result
         show-area
         show-detail
         :search-result="searchResult"
         :area-columns-placeholder="['请选择', '请选择', '请选择']"
         @save="onSave($event)"
         @delete="onDelete($event)"
       />
</van-popup>

show:控制弹出层
:address-info="AddressInfo"：地址信息初始值
在编辑函数里写入初始值：

      this.AddressInfo = {
        id: item.id, //收货人信息初始值
        name: item.username, //姓名
        tel: item.telephone, //电话
        province: item.province, //省份
        city: item.city, //城市
        country: item.area, //区县
        // areaCode: "", //地址code：ID
        addressDetail: item.address, //详细地址
        isDefault: "", //是否选择默认
      };

此时默认地址不显示：
我们需要：

      //  拿取默认地址的code  设置默认的省市区
      this.AddressInfo.areaCode = this.result.provinceCode;
      this.AddressInfo.areaCode = this.result.cityCode;
      this.AddressInfo.areaCode = this.result.areaCode;

//2023.8.24号更改为:
//只需要最后一行代码就可以了
 this.AddressInfo.areaCode = this.result.areaCode;

如果你只有地址名称没有，对应地址的code,那么你可以看看这篇文章
根据地址名称获取code–点击跳转
以上的实现效果如下：

-----------------------------------------2023.8.24更新-----------------------------------------
上面代码有些地方存在错误，我更改了一些
实现效果图：