ElementUI -- 表单嵌套表格，v-for生成的表单项实现表单验证。

一、效果演示

二、el-form的验证实现

1、在 el-form 上添加规则对象，名称可自定义 :rules=“skuRule”
2、给 el-form-item 添加属性 props=“名称”，需注意的是这个名称需要与规则对象skuRule中的属性名一致，不然验证不了
3、在 data 中定义 skuRule规则。
注意：v-for循环生成的表单项校验大体上与一般校验是一致的，其中最大的差异就在于prop值得显示。因为表单验证的规则和字段是一一对应的，我们v-for出来的字段名又都是一样的，如果不做相应处理，一旦触发验证，那便会牵一发而动全身，如下图所示：

处理方法：prop的值是以el-form中model绑定的值为起点一层一层往下获取到的，可以先找到验证字段所在的数组，然后获取数组下标，最后定位到prop验证字段，层级间使用"."符号隔开，写法如下：

:prop="'sku_list.' + scope.$index + '.'+'price'"
:rules="skuRule.oprice"

1、界面代码：

 <!-- sku组合可视化显示 -->
<el-form :model="listModel" ref="skuListForm">
    <el-table v-if="skuVisible" :data="listModel.sku_list" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column
            align="center"
            :label="item.sku_name"
            v-for="(item,index) in sku_table"
            :key="index"
            :prop="item.value"
        ></el-table-column>
        <el-table-column label="会员价(元)" align="center">
            <template slot-scope="scope">
                <el-form-item
                    :prop="'sku_list.' + scope.$index + '.'+'price'"
                    :rules="skuRule.price"
                >
                    <el-input
                        style="margin-top:15px"
                        placeholder="请输入"
                        v-model="scope.row.price"
                        @change="getSale(scope.row)"
                        clearable
                    ></el-input>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column label="原始价(元)" align="center">
            <template slot-scope="scope">
                <el-form-item
                    :prop="'sku_list.' + scope.$index + '.'+'oprice'"
                    :rules="skuRule.oprice"
                >
                    <el-input
                        style="margin-top:15px"
                        placeholder="请输入"
                        v-model="scope.row.oprice"
                        @change="getSale(scope.row)"
                        clearable
                    ></el-input>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column label="库存(件/个)" align="center">
            <template slot-scope="scope">
                <el-form-item
                    :prop="'sku_list.' + scope.$index + '.'+'stock_num'"
                    :rules="skuRule.stock_num"
                >
                    <el-input
                        style="margin-top:15px"
                        placeholder="请输入"
                        v-model="scope.row.stock_num"
                        @change="getStock"
                        clearable
                    ></el-input>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column label="sku标题" align="center">
            <template slot-scope="scope">
                <el-form-item
                    :prop="'sku_list.' + scope.$index + '.'+'name'"
                    :rules="skuRule.name"
                >
                    <el-input
                        style="margin-top:15px"
                        placeholder="请输入"
                        v-model="scope.row.name"
                        clearable
                    ></el-input>
                </el-form-item>
            </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="scope">
                <el-button
                    type="danger"
                    size="mini"
                    @click="delData(listModel.sku_list,scope.$index)"
                >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</el-form>

2、校验规则：

data() {
    return {
        listModel: {
            sku_list: []
        },
        skuRule: {
            oprice: [{ required: true, message: '请输入原始价', trigger: 'blur' }],
            price: [{ required: true, message: '请输入会员价', trigger: 'blur' }],
            stock_num: [{ required: true, message: '请输入商品库存', trigger: 'blur' }],
            name: [{ required: true, message: '请输入sku标题', trigger: 'blur' }]
        },
    };
},