AddressEdit 地址編輯

1.vant-ui地址編輯中已配置 :area-list=“areaList”，以初始化全部省市區的資料

這是結合vant-ui彈出層一起用的，用彈出層包裹省市區選擇的元件，然後根據需要，參照官方文件，進行相關配置，預設底部彈出。

重要的是，官方沒有說明具體怎麼使用，所以在這裡，要獲取接收省市區的json資料。其中area.js檔案在官方可以下載，放於assets/js/area.js ，然後引入檔案，就可以了。

如下：

<template>
 <div>
 <van-nav-bar title="地址資訊" left-text="返回" left-arrow @click-left="onClickLeft"/>
 <van-address-edit
 :area-list="areaList"
 show-postal
 show-delete
 show-set-default
 show-search-result
 :search-result="searchResult"
 @save="onSave"
 @delete="onDelete"
 @change-detail="onChangeDetail"
 />
 </div>
</template>

<script>
import areaList from "../assets/js/area.js";
import { Toast } from "vant";
export default {
 name: "Address",data() {
 return {
 areaList,searchResult: []
 };
 },methods: {
 onClickLeft() {
 this.$router.push("/my");
 },onSave() {
 this.$router.push("/my");
 },onDelete() {
 Toast("delete");
 this.$router.push("/my");
 },onChangeDetail(val) {
 if (val) {
 this.searchResult = [
  {
  name: "萬達廣場",address: "鄭州市二七區"
  }
 ];
 } else {
 this.searchResult = [];
 }
 }
 }
};
</script>

<style scoped>
</style>

補充知識：vue移動端地址編輯地址回顯

寫這篇文章主要是前面寫這個地址的時候遇到了一些坑，走了許多彎路，這裡記錄一下，給新手朋友們指道，

這是編輯原圖

專案原圖

最開始我用了vant ui框架，在地址這方面vant一直很好用，地址列表 省市區選擇元件都用，

最開始沒什麼問題 在經歷了幾次版本更新之後 不知道什麼頁面與vant地址選擇元件起衝突，導致選擇省市區的時候 彈框裡空白，在經歷了無數次嘗試之後，我放棄了 改用了muse省市區選擇元件，但是地址回顯的時候由於後端返回不了城市編碼，沒辦法 最後使用了vux ，

使用了vuex的元件又遇到一點麻煩，我是隻有在地址列表把地址詳情傳過去，然後在created接受，並直接賦值給元件，這是時候發現頁面地址選擇部分白板，並沒有達到我們想要的回顯效果，後面研究了一下 是因為我們在created直接賦值 導致賦值實在頁面渲染完畢之前的 這時候頁面就無法顯示渲染之前的內容，下面是我的解決辦法

不能直接在created時給元件賦值，在methods寫個方法 0.1s之後再賦值 .1s已經足夠頁面渲染完成 只要頁面渲染完畢再輔助 就能正常顯示

完美解決！

以上這篇vant-ui AddressEdit地址編輯和van-area的用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。