vant地址列表回显(设置默认省市区地址)

vant area地址回显(默认展示地址)

  • 根据省市区Id(provinceId,cityId,countyId)获取省市区name
  • 最终效果图

根据省市区Id(provinceId,cityId,countyId)获取省市区name

// 首先设置addressInfo参数
	data () {
    	return {
    	   addressInfo:{
          	 name: '雨季',			//姓名
          	 tel: '120',	//电话
          	 areaCode:'110000',	//北京市
             areaCode:'110100',	//北京市
             areaCode:'110102',	//西城区
             addressDetail:'复兴门'	//详细地址
      		},
    	}
    }
    mounted(){
        this.addressInfo.areaCode = this.Address1.addressSheng	//设置省ID
    	this.addressInfo.areaCode = this.Address1.addressShi	//设置市ID
    	this.addressInfo.areaCode = this.Address1.addressxian	//设置区ID
    }

areaCode要设置三次,对应省市区

最终效果图

vant地址列表回显(设置默认省市区地址)_第1张图片
备注:如果只是显示地址列表,不让用户进行操作,可对表单进行禁用。但是vant的AddressEdit 文档中只有禁用地区选择(disable-area),设置disabled和readonly无效,可在表单区域再写一个div进行定位,覆盖表单即可

你可能感兴趣的:(vant,Address,area)