（1）安装 address-parse模块

npm install address-parse --save

（2）地址修改-弹窗页面

javascript"><template><div><el-dialog title="修改收货地址" :visible.sync="dialogVisible" width="45%"><el-form ref="form" :model="formData"  :rules="rules" label-width="120px" style="margin-right:20px;height:400px;"><el-form-item><el-input type="textarea" :rows="2" placeholder="粘贴收货信息，(格式：姓名 电话 地址)" v-model="addressInfo" @input="parseAddress"></el-input></el-form-item><el-form-item label="收货人名称" prop="recipientName"><el-input v-model="formData.recipientName"></el-input></el-form-item><el-form-item label="收货人手机号码" prop="recipientMobile"><el-input v-model="formData.recipientMobile"></el-input></el-form-item><el-form-item label="省" prop="recipientProvinceName"><el-input v-model="formData.recipientProvinceName"></el-input></el-form-item><el-form-item label="市" prop="recipientCityName"><el-input v-model="formData.recipientCityName"></el-input></el-form-item><el-form-item label="区" prop="recipientCountyName"><el-input v-model="formData.recipientCountyName"></el-input></el-form-item><el-form-item label="收货人详细地址" prop="recipientAddress"><el-input v-model="formData.recipientAddress"></el-input></el-form-item></el-form><div style="text-align:center;margin-top:50px;"><el-button type="primary" @click="onConfirm()">确定</el-button><el-button @click="dialogVisible = false">取消</el-button></div></el-dialog></div>
</template><script>import OrderApi from '@/api/OrderApi'
import AddressParse from 'address-parse';
export default {components: {},data() {return {dialogVisible:false,formData: {recipientName:null,recipientMobile:null,recipientProvinceName:null,recipientCityName:null,recipientCountyName:null,recipientAddress:null,},rules: {recipientName: [{ required: true, message: '请输入收货人名称', trigger: 'blur' }],recipientMobile: [{ required: true, message: '请输入收货人手机号码', trigger: 'blur' }],recipientProvinceName: [{ required: true, message: '请输入省', trigger: 'blur' }],recipientCityName: [{ required: true, message: '请输入市', trigger: 'blur' }],recipientCountyName: [{ required: true, message: '请输入区', trigger: 'blur' }],recipientAddress: [{ required: true, message: '请输入收货人详细地址', trigger: 'blur' }],},addressInfo:null,}},created() {},methods: {show(data) {this.addressInfo = null;this.$refs['form'] && this.$refs['form'].resetFields();this.formData.orderId = data.id;this.formData.recipientName = data.recipientName;this.formData.recipientMobile = data.recipientMobile;this.formData.recipientProvinceName = data.recipientProvinceName;this.formData.recipientCityName = data.recipientCityName;this.formData.recipientCountyName = data.recipientCountyName;this.formData.recipientAddress = data.recipientAddress;this.dialogVisible = true},onConfirm() {this.$refs['form'].validate((valid) => {if (valid) {OrderApi.updateAddress(this.formData).then(res => {this.$message.success('修改成功')this.dialogVisible = falsethis.$emit('s')})} else {return false;}});},parseAddress(value) { //地址解析if (value != '') {// 虚拟手机号码const numbers = value.match(/\d{11,}-{0,1}\d{4}/);if(numbers){this.$set(this.formData, 'recipientMobile', numbers[0]);value = value.replace(numbers[0],'');}const result = AddressParse.parse(value);this.$set(this.formData, 'recipientProvinceName', result[0].province)this.$set(this.formData, 'recipientCityName', result[0].city)this.$set(this.formData, 'recipientCountyName', result[0].area)this.$set(this.formData, 'recipientAddress', result[0].details)this.$set(this.formData, 'recipientName', result[0].name)if(result[0].mobile){this.$set(this.formData, 'recipientMobile', result[0].mobile)}}},}
}
</script><style scoped>
</style>

（3）按钮

javascript"><el-button type="primary" size="mini" @click="$refs.addressEditForm.show(row)">修改收货地址</el-button>