el-table嵌套表单并添加表单验证

注意事项：

①：el-form标签要放在table的外面

②：表格绑定的数据要作为表单的属性

columnAggreForm: {
                  column_type: "text",
                    agg_type: "yes",
                    //表格数据
                    agg_columns: [{
                        guid: this.getGuid(),
                        column_name:''
                    }]
                },

③：使用表格嵌套表单是el-form-item :prop=” 绑定的表格的字段“ + scope.$index + "验证字段"

<qz-table-column prop="column_id" label="列名">
                    <template slot-scope="scope">
                        <el-form-item class="column_table" :prop="'agg_columns.' + scope.$index + '.column_id'" :rules="rules.column_id">
                            <el-select class="width-full" v-model="scope.row.column_id" clearable placeholder="请选择列名">
                                <el-option v-for="item in columnDataList" :label="item.show_name"
                                    :value="item.column_id" :key="item.column_name"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </qz-table-column>

④：表格内的表单要使用，内联验证：

<el-form-item class="column_table" :prop="'agg_columns.' + scope.$index + '.column_id'" :rules="rules.column_id">

完整代码：

data() {
            return {
                columnAggreForm: {
                    column_type: "text",
                    agg_type: "yes",
                    agg_columns: [{
                        guid: this.getGuid(),
                        column_name:''
                    }]
                },
                rules:{
                    column_name:[
                        {required:true,message:'请输入列名'},
                        {
                            validator: function (rule, value, callback) {
                                //  校验英文的正则
                                if (/[a-zA-z]$/.test(value) == false) {
                                    callback(new Error("请输入英文列名"));
                                } else {
                                    //校验通过
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    show_name:[
                        {required:true,message:'请输入显示名',trigger:'blur'}
                    ],
                    column_id:[
                        {required:true,message:'选择列名',trigger:'change'}
                    ]
                },
                columnDataList: []
            };
        },

js:

        <el-form ref="cForm" :model="columnAggreForm" :rules="rules" label-position="right" label-width="90px" size="small">
            <el-form-item label="列名：" prop="column_name">
                <el-input v-model="columnAggreForm.column_name" placeholder="请输入聚合列名" />
            </el-form-item>
            <el-form-item label="显示名：" prop="show_name">
                <el-input v-model="columnAggreForm.show_name" placeholder="请输入显示名" />
            </el-form-item>
            <qz-pro-table class="mt10" ref="config-table" :pageVisible="false"
                :data-source="columnAggreForm.agg_columns" row-key="guid">
                <template slot="headerPrepend">
                    <span>选择需要聚合的列：</span>
                </template>
                <template slot="headerAppend">
                    <el-button type="primary" size="small" @click="addColumn">添加</el-button>
                </template>
                <qz-table-column label="排序" width="90">
                    <span class="el-icon-sort draggerIcon"></span>
                </qz-table-column>
                <qz-table-column prop="column_id" label="列名">
                    <template slot-scope="scope">
                        <el-form-item class="column_table" :prop="'agg_columns.' + scope.$index + '.column_id'" :rules="rules.column_id">
                            <el-select class="width-full" v-model="scope.row.column_id" clearable placeholder="请选择列名">
                                <el-option v-for="item in columnDataList" :label="item.show_name"
                                    :value="item.column_id" :key="item.column_name"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </qz-table-column>
                <qz-table-column label="操作" width="90">
                    <template slot-scope="{row}">
                        <span class="text-btn" @click="deleteColumn(row)">删除</span>
                        <span></span>
                    </template>
                </qz-table-column>
            </qz-pro-table>
        </el-form>