注意:
:prop=“ruleDetails.${index}.rechargeAmount
” 注意属性前边不加ruleForm
:rules=“rules.rechargeAmount” 单独设置rules
<template>
<div>
<el-dialog :title="id ? '编辑优惠' : '新增优惠'" :visible.sync="show" @close="resetForm">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="优惠名称" prop="discountsActivityName">
<el-input v-model="ruleForm.discountsActivityName" maxlength="20" show-word-limit></el-input>
</el-form-item>
<!-- 动态增删表单必填验证
1、:prop="`ruleDetails.${index}.rechargeAmount`" 注意属性前边不加ruleForm
2、:rules="rules.rechargeAmount" 单独设置rules
-->
<el-row v-for="(item, index) in ruleForm.ruleDetails" :key="index">
<el-col :span="11">
<el-form-item label="充值/元" :prop="`ruleDetails.${index}.rechargeAmount`" :rules="rules.rechargeAmount">
<el-input type="number" v-model="item.rechargeAmount"></el-input>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item label="赠送/元" :prop="`ruleDetails.${index}.discountsAmount`" :rules="rules.discountsAmount">
<el-input type="number" v-model="item.discountsAmount"></el-input>
</el-form-item>
</el-col>
<el-col :span="2">
<i v-if="index == 0" class="blue size-32 flex_r el-icon-circle-plus" @click="add"></i>
<i v-else class="red size-32 flex_r el-icon-remove" @click="del(index)"></i>
</el-col>
</el-row>
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="ruleForm.remark" rows="3" maxlength="200" show-word-limit></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
<el-button @click="show = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import {
infoApi,
addApi,
} from "@/api/member/discount.js";
export default {
data() {
return {
id: '',
show: false,
ruleForm: {
discountsActivityName: '',
remark: '',
ruleDetails: [{ // 初始值一条
rechargeAmount: '',
discountsAmount: '',
}]
},
rules: {
discountsActivityName: [
{ required: true, message: '请输入优惠名称', trigger: 'blur' },
],
rechargeAmount: [ // 定义每个字段规则
{ required: true, message: '请输入充值金额', trigger: 'blur' },
],
discountsAmount: [
{ required: true, message: '请输入赠送金额', trigger: 'blur' },
],
},
};
},
mounted() { },
methods: {
// 用于暴露给父组件
init(id) {
if (id) {
this.id = id
infoApi({
discountsActivityId: this.id
}).then(res => {
this.ruleForm = res.data
})
}
this.show = true;
},
add() {
this.ruleForm.ruleDetails.push({
rechargeAmount: '',
discountsAmount: '',
})
},
del(index) {
this.ruleForm.ruleDetails.splice(index, 1)
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log(this.ruleForm)
addApi(this.ruleForm).then(res => {
this.$message.success(this.id ? '编辑成功' : '新增成功')
this.show = false
this.$emit('update')
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm() {
this.$refs['ruleForm'].resetFields();
this.ruleForm.ruleDetails = [{
rechargeAmount: '',
discountsAmount: '',
}]
this.id = ''
},
// 重置
resetQuery() {
this.resetForm("queryForm");
this.getList(1);
},
},
};
</script>