<el-form ref="ruleForm" :model="formPriceAllocation" class="priceBox">
<el-table
:data="formPriceAllocation.cardPriceAllocation"
:show-header="false"
border
style="width: 100%"
size="mini"
>
<el-table-column>
<template slot-scope="scope">
<div class="table-main">
<el-form-item
//prop 绑定对应的表单里面的值 +scope.$index+ 可理解为对应的下标
'cardPriceAllocation.' + scope.$index + '.customerLevel' 可理解为 cardPriceAllocation[scope.$index].customerLevel
:prop="
'cardPriceAllocation.' + scope.$index + '.customerLevel'
"
:rules="rules.customerLevel"
>
<el-input
v-model.trim="scope.row.customerLevel"
size="mini"
@blur="isCustomerLevelRepeat(scope.row.customerLevel)"
/>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div class="table-main">
<el-form-item
:prop="'cardPriceAllocation.' + scope.$index + '.gradeValue'"
:rules="rules.gradeValue"
>
<el-input
v-model.trim="scope.row.gradeValue"
size="mini"
@blur="isGradeValueRepeat(scope.row.gradeValue)"
/>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row.allList"
:key="index"
class="table-main"
>
<el-form-item
:prop="
'cardPriceAllocation.' +
scope.$index +
'.allList.' +
index +
'.allocationListStartTime'
"
:rules="rules.allocationListStartTime"
>
<el-date-picker
ref="start"
v-model="item.allocationListStartTime"
:placeholder="$t('userInfo.enter') + $t('table.startTime')"
type="datetime"
size="mini"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
style="width: 100%"
@change="
allocationListTimeChange(scope.$index, index, 'start')
"
/>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row.allList"
:key="index"
class="table-main"
>
<el-form-item
:prop="
'cardPriceAllocation.' +
scope.$index +
'.allList.' +
index +
'.allocationListEndTime'
"
:rules="rules.allocationListEndTime"
>
<el-date-picker
ref="start"
v-model="item.allocationListEndTime"
placeholder="不选默认为永久"
type="datetime"
size="mini"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss"
style="width: 100%"
@change="
allocationListTimeChange(scope.$index, index, 'end')
"
/>
</el-form-item>
</div>
</template>
</el-table-column>
<el-table-column>
<template slot-scope="scope">
<div
v-for="(item, index) in scope.row.allList"
:key="index"
class="table-main"
>
<el-form-item
:prop="
'cardPriceAllocation.' +
scope.$index +
'.allList.' +
index +
'.allocationListPrice'
"
:rules="rules.allocationListPrice"
>
<el-input
v-model.trim="item.allocationListPrice"
size="mini"
/>
</el-form-item>
</div>
</template>
</el-table-column>
</el-table>
</el-form>
data(){
return{
// 表单绑定的对应的数据
formPriceAllocation: {
cardPriceAllocation: [
{
customerLevel: '', // 客户等级
gradeValue: '', // 等级值
allList: [
{
allocationListStartTime: '', // 生效开始时间
allocationListEndTime: '', // 生效结束时间
allocationListPrice: '' // 价格
}
]
}
]
},
// 表单绑定的规则校验
rules: {
customerLevel: [
{
required: true,
validator: priseCustomerLevelRules,
trigger: ['blur']
}
],
gradeValue: [
{
required: true,
validator: priseGradeValueRules,
trigger: ['blur']
}
],
allocationListStartTime: [
{ required: true, validator: priseStartTimeRules, trigger: ['blur', 'change'] }
],
allocationListEndTime: [
{ required: true, validator: priseEndTimeRules, trigger: ['blur'] }
],
allocationListPrice: [
{ required: true, validator: priseRules, trigger: 'blur' }
]
},
}
}
vue表单里面嵌套表格,并对表格里面的内容进行表单验证
最新推荐文章于 2023-08-13 15:30:56 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)