el-form内容重置（解决点击保存关闭后再点击新增会有编辑携带的数据的问题）

主要代码：  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 = value
          if (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 = false
      this.$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>