avue中option
{
label: '',
labelWidth: 0,
hide: true,
prop: 'savePriceItemDtos',
formslot: true,
span: 24,
},element插槽
<template slot="savePriceItemDtosForm">
<!-- 优化：动态表单 -->
<div style="text-align: right;"> <i class="el-icon-plus hoverBtn" @click="addForm"
style="color: #409EFF;font-size:25px;"></i>
</div>
<div :class="{'marginTop': index>0}" v-for="(priceItem, index) in form.savePriceItemDtos" :key="index">
<el-form ref="savePriceItemDtosForm" :model="priceItem" :rules="rules" label-width="80px">
<el-col :span="4">
<el-form-item label="价格名称" size="small" prop="priceName">
<el-input v-model="priceItem.priceName"></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="供水方式" size="small" prop="supplyWaterWay">
<el-select v-model="priceItem.supplyWaterWay" placeholder="请选择供水方式">
<el-option v-for="item in supplyWaterWayList" :label="item.dictValue" :value="item.dictKey"
:key="item.dictKey"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="水源类型" size="small" prop="headwatersType">
<el-select v-model="priceItem.headwatersType" placeholder="请选择水源类型">
<el-option v-for="item in headwatersTypeList" :label="item.dictValue" :value="item.dictKey"
:key="item.dictKey"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="水库类型" size="small" prop="reservoirType">
<el-select v-model="priceItem.reservoirType" placeholder="请选择水库类型">
<el-option v-for="item in reservoirLevelList" :label="item.dictValue" :value="item.dictKey"
:key="item.dictKey"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="作物类型" size="small" prop="cropType">
<el-select v-model="priceItem.cropType" placeholder="请选择作物类型">
<el-option v-for="item in cropTypeList" :label="item.dictValue" :value="item.dictKey"
:key="item.dictKey"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- 价格项目--表格 -->
<el-table class="table-box" :data="priceItem.saveLadderPriceDto" border style="width: 100%">
<!-- 表头添加行：:render-header="renderHeader" -->
<el-table-column prop="priceProjectName" label="价格项目名称" align="center">
<template slot-scope="scope">
<el-form-item :prop="'saveLadderPriceDto.' + scope.$index + '.priceProjectName'"
:rules="{required: true, message: '不能为空',trigger: 'blur'}">
<el-input v-model="scope.row.priceProjectName" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="ladder" label="阶梯" align="center">
<template slot-scope="scope">
<el-form-item :prop="'saveLadderPriceDto.' + scope.$index + '.ladder'"
:rules="{required: true, message: '不能为空',trigger: 'blur'}">
<!-- <el-input v-model="scope.row.ladder" disabled></el-input> -->
{
{ scope.row.ladder }}
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="price" label="价格（元/m³）" align="center">
<template slot-scope="scope">
<el-form-item :prop="'saveLadderPriceDto.' + scope.$index + '.price'"
:rules="{required: true, message: '不能为空',trigger: 'blur'}">
<el-input-number style="width:100%" v-model="scope.row.price" :precision="2" :step="0.1" :max="999"
:min="0"></el-input-number>
</el-form-item>
</template>
</el-table-column>
<!-- 无阶梯水价不显示，农业用水为定额倍数，生活用水为截止量 -->
<el-table-column v-if="form.isLadderPrice !='0'" prop="end"
:label="form.useWaterProperty=='2' ?'定额倍数':'截止量（m³）'" align="center">
<template slot-scope="scope">
<el-form-item :prop="'saveLadderPriceDto.' + scope.$index + '.end'"
:rules="{required: true, message: '不能为空',trigger: 'blur'}">
<el-input v-model="scope.row.end" clearable></el-input>
</el-form-item>
</template>
</el-table-column>
<!-- <el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete" circle
@click="deleteRow(scope.row, index)"></el-button>
</template>
</el-table-column> -->
</el-table>
</el-form>
</div>
</template>添加按钮方法
// 添加水价表格
addForm() {
// 根据阶梯数，添加行数据
let ladderNum = Number(this.form.ladderNum) || 1
let tableData = []
for (let i = 0; i < ladderNum; i++) {
tableData.push({
// rowKey: getOnlyID(),
priceProjectName: '水费',
price: 1,
ladder: Number(this.form.ladderNum) > 0 ? i + 1 : 0,
disabled: true,
feeType: this.$const.priceItemTypeValue.WATER_FEE,
end: 0,
})
}
this.form.savePriceItemDtos.push({
priceName: '',
supplyWaterWay: '',
headwatersType: '',
reservoirType: '',
cropType: '',
saveLadderPriceDto: tableData,
})
},校验多个动态表单方法
// 验证多个价格表单
submitForm() {
let flag = true
for (let i = 0; i < this.form.savePriceItemDtos.length; i++) {
this.$refs.savePriceItemDtosForm[i].validate((valid) => {
if (!valid) {
flag = false
}
})
}
return flag
},