vue2+elementUI实现表格的行内表单校验

要想实现表格的行内表单校验就要用表单嵌套表格,例子如下

<el-form :model="formData" :rules="rules" inline-message="true">
            <el-table :data="formData.tableData" style="width: 100%" height="600" border :row-class-name="tableRowClassName">
                <el-table-column prop="statisticsName" label="测点名称" width="240"></el-table-column>
                <el-table-column prop="alias" label="别名"> </el-table-column>
                <el-table-column prop="mrID" label="关联测点OID">
                    <template slot-scope="scope">
                        <div v-if="scope.row.edit">{{ scope.row.mrID }}</div>
                        <div v-else>
                            <el-form-item :prop="'tableData.' + scope.$index + '.mrID'" :rules="rules.mrID">
                                <el-input v-model="scope.row.mrID" placeholder="请输入内容"></el-input>
                            </el-form-item>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="精确度">
                    <template slot-scope="scope">
                        <div v-if="scope.row.edit">{{ scope.row.accuracy }}</div>
                        <div v-else>
                            <el-input v-model="scope.row.accuracy" placeholder="请输入内容"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                      <div v-if="scope.row.edit">
                        <el-button type="text" size="small" @click="scope.row.edit = false">编辑</el-button>
                      </div>
                      <div v-else>
                        <el-button type="text" size="small" @click="scope.row.edit = true">保存</el-button>
                        <el-button type="text" size="small" @click="scope.row.edit = true">取消</el-button>
                      </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>

需要注意的是因为表单里面嵌套表格，所以表格的数据要写在表格绑定的数据里面，比如表单绑定的数据为formData，那么表格绑定的数据为formData.tableData

对应的js部分如下

export default {
	data() {
		return {
            formData:{
                tableData:[]
            },
            
            rules:{
                mrID: [
                    {required: true, message:'请输入关联测点OID', trigger: 'blur'}
                ]
            }
		};
	},
	computed: {},
	watch: {},
	mounted() {
	},
	methods: {
        // 表格
        tableRowClassName() {
            return "even-row";
        },
	},
};

此时已经可以实现想要的表单校验的效果，如果这时样式还存在问题，可以试试css穿透

<style scoped lang="less">
.card-container{
    width: 1552px;
    height: 600px;
    background-color: #ccc ;
    .el-table {
        /deep/ .cell {
            white-space: normal !important;
        }    
    }
    /deep/ .el-form-item {
        margin-bottom: 0;
    }
    /deep/ .el-form-item__content {
        line-height: normal;
    }
}
</style>