element-ui 解決 table 裏包含表單驗證的問題！

實際項目中的場景，須要在table裏作表單的驗證，如圖效果：

 

其實問題關鍵就在於如何給el-form-item動態綁定prop

          :prop="'tableData.' + scope.$index + '.字段名'"

詳見代碼：

<template>
    <div v-bgb-block>
        <div style="margin-top:10px;">
            <el-form :rules="model.rules" :model="model"  ref="form">
                <!-- 表佈局 -->
                <el-table
                border
                :data="model.tableData"
                style="width: 100%;"
                :default-sort = "{prop: 'date', order: 'descending'}"
                >
                <el-table-column
                    width="100px"
                    label="要求批次">
                    <template slot-scope="scope">
                            <el-form-item :prop="'tableData.' + scope.$index + '.input'" :rules='model.rules.name'>
                                <el-input style="width:80px"  v-model="scope.row.input" ></el-input>
                            </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column
                    width="180px"
                    label="要求供應商">
                    <template slot-scope="scope">
                            <el-form-item :prop="'tableData.' + scope.$index + '.supplier'" :rules='model.rules.supplier'>
                                <el-select style="width:130px" v-model="scope.row.supplier" placeholder="請選擇要求供應商"></el-select>
                            </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column
                    width="180px"
                    label="要求生產日期">
                        <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.producedate.start'" :rules='model.rules["producedate.start"]'>
                                    <bingobox-datepicker type="date" :model="scope.row.producedate" ></bingobox-datepicker>
                                </el-form-item>
                        </template>
                    </el-table-column>
                <el-table-column
                    width="180px"
                    label="要求有效期至">
                        <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.expireddate.start'" :rules='model.rules["expireddate.start"]'>
                                    <bingobox-datepicker type="date" :model="scope.row.expireddate" ></bingobox-datepicker>
                                </el-form-item>
                        </template>
                </el-table-column>
                <el-table-column
                    width="150px"
                    label="要求商品形態">
                        <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.goodstatus'" :rules='model.rules.goodstatus'>
                                    <el-select style="width:130px" v-model="scope.row.goodstatus" placeholder="請選擇商品形態"></el-select>
                                </el-form-item>
                        </template>
                </el-table-column>
                <el-table-column
                    width="100px"
                    label="期待出庫數量">
                        <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules='model.rules.name'>
                                    <el-input style="width:80px"  v-model="scope.row.name" ></el-input>
                                </el-form-item>
                        </template>
                </el-table-column>
                <el-table-column
                    label="操做">
                    <template slot-scope="scope">
                        <el-button size="small" v-button-color>刪除</el-button>
                        </template>
                </el-table-column>
            </el-table>
            </el-form>
        </div>
    </div>
</template>

　　

<script>
export default {
    data(){
        return {
            form:{
                supplier2:"",
                type:"",
                desc:"",
                input:""
            },
            model:{
                rules: {
                    name:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                    input:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                    supplier:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                    goodstatus:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                    "producedate.start":{ type:"string",required:true,message:"必填字段",trigger:"change"},
                    "expireddate.start":{ type:"string",required:true,message:"必填字段",trigger:"change"}
                },
                tableData:[{
                    input:"",
                    name:"",
                    supplier:"",
                    goodstatus:"",
                    producedate:{
                        start:""
                    },
                    expireddate:{
                        start:""
                    }
                },{
                    input:"",
                    name:"",
                    supplier:"",
                    goodstatus:"",
                    producedate:{
                        start:""
                    },
                    expireddate:{
                        start:""
                    }
                }]
            }
        }
    },
    methods: {
        add () {
            console.log(this.form);
        },
        save () {
            this.$refs["form"].validate((valid,model)=>{
                console.log(valid);
                console.log(model);
            })
        }
    }
}
</script>