直接上代碼。
<el-form :model="formData" :rules="formRules" ref="submitForm" label-width="108px" size="small" :disabled="formData.isExpired === 1">
<el-form-item label="時段" >
<span>{{dayObj.periodStartTime}}~{{dayObj.periodEndTime}}</span>
</el-form-item>
<el-form-item label="場地" prop="venueList">
<el-select v-model="formData.venueList" multiple placeholder="請選擇場地" >
<el-option
v-for="item in siteList"
:key="item.venueId"
:label="item.venueName"
:value="item.venueId">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="價格" >
<el-button type="primary" plain size="mini" @click="reset">重置</el-button>
<div>
<el-table :data="formData.priceList" id="out-table" >
<el-table-column label="時間" prop="time" show-overflow-tooltip></el-table-column>
<el-table-column label="原價" show-overflow-tooltip >
<template slot-scope="scope">
<el-form-item :prop="'priceList.' + scope.$index + '.originalPrice'" :rules='formRules.originalPrice'>
<el-input v-model="scope.row.originalPrice" placeholder="" type="number"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="折扣價" show-overflow-tooltip >
<template slot-scope="scope">
<el-input v-model="scope.row.discountPrice" placeholder="" type="number" style="margin-bottom: 18px"></el-input>
</template>
</el-table-column>
</el-table>
</div>
</el-form-item>
</el-form>
其實問題關鍵就在於如何給el-form-item動態綁定prop
:prop="'tableData.' + scope.$index + '.字段名'"