主要代码：  this.$refs['ruleForm'].resetFields()

<template><div class="add-edit-coupon"><el-dialog title="商品优惠券" top="10vh" :visible.sync="dialogVisible" width="660px" :before-close="handleClose"><div class="add-edit-coupon-cont"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="优惠券类型" prop="couponType"><div class="add-edit-coupon-item-cont">商品优惠券</div></el-form-item><el-form-item label="优惠券名称" prop="couponName"><el-input v-model="ruleForm.couponName" maxlength="14" placeholder="请输入优惠券名称" show-word-limit></el-input></el-form-item><el-form-item label="优惠券简介" prop="briefIntroduction"><el-input type="textarea" maxlength="40" placeholder="请输入优惠券简介" v-model="ruleForm.briefIntroduction" show-word-limit></el-input></el-form-item><el-form-item label="优惠方式" prop="couponType"><el-radio-group v-model="ruleForm.couponType"><el-radio :label="1">折扣券</el-radio></el-radio-group></el-form-item><el-form-item label="折扣力度" prop="deductionPrice"><el-input type="number" v-model="ruleForm.deductionPrice"><template slot="append">折</template></el-input></el-form-item><el-form-item label="使用范围" prop="toolApplicationIdList"><el-checkbox-group v-model="ruleForm.toolApplicationIdList"><el-checkbox label="5" name="toolApplicationIdList">现场投票</el-checkbox><el-checkbox label="2" name="toolApplicationIdList">H5聚合页</el-checkbox><el-checkbox label="4" name="toolApplicationIdList">投票评选</el-checkbox><el-checkbox label="1" name="toolApplicationIdList">大屏抽奖</el-checkbox></el-checkbox-group></el-form-item><el-form-item label="领取方式" prop="payment"><el-radio-group v-model="ruleForm.payment"><el-radio :label="1">自动发放</el-radio></el-radio-group></el-form-item><el-form-item label="可用日期" prop="availabilityDate"><el-input type="number" v-model="ruleForm.availabilityDate"><template slot="prepend">领劵后</template><template slot="append">天</template></el-input></el-form-item><el-form-item label="发放条件" prop="distributionConditions"><el-select v-model="ruleForm.distributionConditions" placeholder="完成首单后发放"><el-option label="完成首单后发放" value="1"></el-option></el-select></el-form-item><el-form-item label="是否上线" prop="status"><el-radio-group v-model="ruleForm.status"><el-radio :label="1">是</el-radio><el-radio :label="0">否</el-radio></el-radio-group></el-form-item></el-form><div slot="footer" class="dialog-footer flex-center"><el-button @click="dialogVisible = false">取 消</el-button><!-- 编辑改保存 --><el-button type="primary" @click="submitForm('ruleForm')">{{ isAdd ? '创 建' : '保 存' }}</el-button></div></div></el-dialog></div>
</template><script>
export default {components: {},props: {value: {type: Boolean,},isAdd: {type: Number,default: 0,},productCouponItem: {type: Object,default: () => {},},},watch: {productCouponItem: {handler(value, oldValue) {if (value) {this.ruleForm = valueif (value.distributionConditions == 1) {this.ruleForm.distributionConditions = '完成首单后发放'}}},},isAdd: {handler(value, oldValue) {if (value == 1) {// 1为新增，新增时重置表单数据，ruleForm为form的ref的名称// 1为新增，新增时重置表单数据，ruleForm为form的ref的名称this.ruleForm = {toolCouponId: '',couponName: '', //优惠券名称briefIntroduction: '', //优惠券简介couponType: 1, //优惠方式：1 折扣券deductionPrice: '', //折扣力度payment: 1, //领取方式:1 自动发放toolApplicationIdList: [], //使用范围availabilityDate: '', //可用日期distributionConditions: '', //发放条件status: '', //优惠码状态： 1上线 0下架}if (typeof this.$refs.ruleForm !== 'undefined') {this.$refs['ruleForm'].resetFields()}}},},'ruleForm.deductionPrice': {handler(value, oldValue) {if (value) {this.ruleForm.deductionPrice = value.toString().replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1') //保留一位小数}},},'ruleForm.availabilityDate': {handler(value, oldValue) {if (value) {this.ruleForm.deductionPrice = value.toString().replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1') //保留一位小数}},},},data() {return {ruleForm: {toolCouponId: '',couponName: '', //优惠券名称briefIntroduction: '', //优惠券简介couponType: 1, //优惠方式：1 折扣券deductionPrice: '', //折扣力度payment: 1, //领取方式:1 自动发放toolApplicationIdList: [], //使用范围availabilityDate: '', //可用日期distributionConditions: '', //发放条件status: '', //优惠码状态： 1上线 0下架},rules: {couponName: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' },{ min: 1, max: 14, message: '长度在 1 到 14个字符', trigger: 'blur' },],briefIntroduction: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' },{ min: 1, max: 40, message: '长度在 1 到 40个字符', trigger: 'blur' },],couponType: [{ required: true, message: '请选择优惠方式', trigger: 'change' }],deductionPrice: [{ required: true, message: '请输入折扣力度', trigger: 'blur' }],toolApplicationIdList: [{ type: 'array', required: true, message: '请至少选择一个工具', trigger: 'change' }],payment: [{ required: true, message: '请选择领取方式', trigger: 'change' }],availabilityDate: [{ required: true, message: '请填写可用日期', trigger: 'blur' }],distributionConditions: [{ required: true, message: '请选择发放条件', trigger: 'change' }],status: [{ required: true, message: '请选择是否上线', trigger: 'change' }],},}},computed: {dialogVisible: {get() {return this.value},set(val) {this.$emit('input', val)},},},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$emit('submitCoupon', this.ruleForm)} else {console.log('error submit!!')return false}})},handleClose() {this.dialogVisible = falsethis.$refs['ruleForm'].resetFields()},},created() {console.log(Object.keys(this.productCouponItem).length != 0, 'productCouponItem')},mounted() {},beforeCreate() {},beforeMount() {},beforeUpdate() {},updated() {},beforeDestroy() {},destroyed() {},activated() {},
}
</script>
<style lang='scss' scoped>
.add-edit-coupon {.add-edit-coupon-item {margin-bottom: 16px;}
}
</style>