<template>
<el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData1" >
<el-form-item label="订单号:" v-if="editorShow" class="el-form-pad">
<template slot-scope="scope">
<el-button type="text" @click="onEdit(scope.row, scope.$index)"> {{formData.orderId}} </el-button>
</template>
</el-form-item>
</el-form>
<el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData2">
<el-form-item label="订单类型:" prop="orderTypeValue">
<el-select v-model="formData.orderTypeValue" placeholder="请选择" size="mini" :disabled="disableIsShow">
<el-option v-for="item in orderTypeList" :key="item.orderTypeValue" :label="item.orderTypeName" :value="item.orderTypeValue"></el-option>
</el-select>
</el-form-item>
</ell-form>
<el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData3">
<el-form-item label="收货人:" prop="userName">
<el-input v-model="formData.userName" size="mini" class="box-width" :disabled="disableIsShow" />
</el-form-item>
</el-form>
<button class="mini-search-btn" @click="handleSave('formData')"> 保存订单 </button>
</template>
<script>
export default {
data() {
return {
formData: {
orderTypeValue: '',
distributionId: '',
invoiceType: '',
payWay: '',
isInvoice: 0,
provinceId: "",
cityId: "",
districtId: "",
importOrderId: "",
zipCode: '',
},
rules: {
payWay: [ {required: true, message: '请选择支付方式', trigger: 'change' } ],
distributionId: [ {required: true, message: '请选择配送方式', trigger: 'change' } ],
orderTypeValue: [ { required: true, message: "请选择订单类型", trigger: "change" } ],
userName: [ { required: true, message: "请输入收货人名字", trigger: "blur" } ],
provinceId: [ { required: true, message: "请选择地区", trigger: "change" } ],
address: [ { required: true,message: "请输入街道地址",trigger: "blur"} ],
mobile: [ { required: true,message: "请输入手机号码",trigger: "blur"}, { validator: validatePhone } ],
},
}
},
methods: {
handleSave(formData) {
let formArr=['formData1','formData2','formData3']
var resultArr=[]
var _self=this
function checkForm(formName) {
var result = new Promise(function(resolve, reject) {
_self.$refs[formName].validate((valid) => {
if (valid) {
resolve();
} else { reject() }
})
})
resultArr.push(result)
}
formArr.forEach(item => {
checkForm(item)
})
Promise.all(resultArr).then(values => {
this.submitForm()
}).catch( _ => {
console.log('err')
})
},
}
}
</script>
``[原文链接](https://blog.csdn.net/qq_39490750/article/details/119868559)