一、效果：
二、代码：
<template>
<div class="seed_consume">
<el-form :model="form" :rules="rules" ref="form">
<div class="itemBox">
<div class="titleBox">
<div class="left">
<span class="title">2、待返发卖贴（转让）消耗种子</span>
<el-button
type="text"
style="margin-left:40px;"
:disabled="form.forumSaleList.length >= 10"
@click="add_rules('forumSaleList','1')"
>添加规则</el-button>
</div>
</div>
<div class="item" v-for="(item,index) in form.forumSaleList" :key="index">
<div style="margin-top:10px;">发帖+转让次数范围</div>
<div style="width:100%;display:flex;margin-top:10px;">
<el-form-item :prop="'forumSaleList.'+index+'.timesMin'" :rules="rules.times">
<el-input v-model="item.timesMin" style="width:100px;"></el-input>-
</el-form-item>
<el-form-item :prop="'forumSaleList.'+index+'.timesMax'" :rules="rules.times">
<el-input v-model="item.timesMax" style="width:100px;"></el-input>次
<el-button
type="text"
style="margin-left:40px;"
@click="del_rules('forumSaleList',index)"
v-if="index > 0"
>删除</el-button>
</el-form-item>
</div>
<div>
<span>扣除种子数量</span>
<el-button
type="text"
style="margin-left:40px;"
@click="add_rules_item('forumSaleList','1',index)"
>添加规则</el-button>
</div>
<div
style="width:100%;display:flex;margin-top:10px;"
v-for="(ite,idx) in form.forumSaleList[index].detailList"
:key="idx"
>
<el-form-item
:prop="`forumSaleList.${index}.detailList.${idx}.periodMin`"
:rules="rules.detailList.period"
>
<span>待返期数在</span>
<el-input v-model="ite.periodMin" style="width:100px;"></el-input>-
</el-form-item>
<el-form-item
:prop="`forumSaleList.${index}.detailList.${idx}.periodMax`"
:rules="rules.detailList.period"
>
<el-input v-model="ite.periodMax" style="width:100px;"></el-input>
<span>期，扣除售价</span>
</el-form-item>
<el-form-item
:prop="`forumSaleList.${index}.detailList.${idx}.amountRate`"
:rules="rules.detailList.amountRate"
>
<el-input v-model="ite.amountRate" style="width:100px;"></el-input>
<span>%的种子+扣除固定种子</span>
</el-form-item>
<el-form-item
:prop="`forumSaleList.${index}.detailList.${idx}.seedQuantity`"
:rules="rules.detailList.seedQuantity"
>
<el-input v-model="ite.seedQuantity" style="width:120px;"></el-input>
<el-button
type="text"
style="margin-left:40px;"
@click="del_rules_item('forumSaleList',index,idx)"
v-if="idx > 0"
>删除</el-button>
</el-form-item>
</div>
</div>
</div>
</el-form>
<div class="btnBox">
<el-button type="primary" @click="submitForm('form')">保存</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
// 自定义校验规则
const times = (rule, value, callback) => {
let a = /^[1-9]\d*$/;
if (value < 1 || value > 5000) {
callback(new Error("值区间：1-5000"));
} else if (!a.test(value)) {
callback(new Error("整数"));
} else {
callback();
}
};
const period = (rule, value, callback) => {
let a = /^(\d+\.\d{1,1}|\d+)$/;
if (value < 0.5 || value > 1000000) {
callback(new Error("值区间：0.5-1000000"));
} else if (!a.test(value)) {
callback(new Error("最多保留1位小数"));
} else {
callback();
}
};
const amountRate = (rule, value, callback) => {
let a = /^\d+(.\d{1,2})?$/;
if (value < 0 || value > 1000) {
callback(new Error("值区间：0-1000"));
} else if (!a.test(value)) {
callback(new Error("最多保留2位小数"));
} else {
callback();
}
};
const seedQuantity = (rule, value, callback) => {
let a = /^[0-9]\d*$/;
if (value < 0 || value > 10000) {
callback(new Error("值区间：0-10000"));
} else if (!a.test(value)) {
callback(new Error("整数"));
} else {
callback();
}
};
return {
form: {
title: "",
forumSaleList: [
{
timesMin: "",
timesMax: "",
detailList: [
{
subType: "1",
periodMin: "",
periodMax: "",
amountRate: "",
seedQuantity: ""
}
]
}
],
},
rules: {
times: {
required: true, validator: times, trigger: "blur" },
times5: {
required: true, validator: times5, trigger: "blur" },
detailList: {
period: {
required: true, validator: period, trigger: "blur" },
amountRate: {
required: true,
validator: amountRate,
trigger: "blur"
},
seedQuantity: {
required: true,
validator: seedQuantity,
trigger: "blur"
}
},
}
};
},
created() {
},
methods: {
// 保存
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
let form = this.form;
console.log(form);
} else {
this.$message.error("请检查输入格式");
return false;
}
});
},
}
};
</script>
web前端交流QQ群：327814892
十二星座的今日运势，QQ扫码查看星座运势，还能领取现金红包
