elementui表格动态新增行验证无效？

Question

用elementui框架的table组件，动态新增行，行里面的列直接使用输入框，但是需要对输入框验证，按照官方的文章尝试了一下，怎么无法触发验证。

问题出在哪儿呢？

单独写了一个干净的页面，去掉了业务代码：

<template>
    <div>
        <el-button type="text" @click="handleAdd">添加人员</el-button>
        <el-form
            :rules="rules"
            ref="dataForm"
            :model="temp"
            label-position="right"
            label-width="150px"
        >
            <el-table :data="temp.pers" border style="width: 100%">
                <el-table-column label="名称">
                    <template scope="scope">
                        <el-input :placeholder="'pers.' + scope.$index + '.name'" v-model="scope.row.name" clearable 
                            :key="'pers.' + scope.$index + '.name'"
                            :prop="'pers.' + scope.$index + '.name'"
                            :rules="{
                                required: true, message: '名称不能为空', trigger: 'blur'
                            }"
                        >
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="age" label="年龄">
                    <template scope="scope">
                        <el-input placeholder="请输入年龄" v-model="scope.row.age" clearable
                            :rules="{ required: true, message: '年龄不能为空', trigger: 'blur' }"
                        ></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="primary" @click="hadnleCreate">确认</el-button>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'test',
    data() {
        return {
            rules: {},
            temp: {
                pers: []
            }
        }
    },
    methods: {
        handleAdd() {
            this.temp.pers.push({
                name: '',
                age: 18
            })
        },
        hadnleCreate() {
            let self = this;
            this.$refs['dataForm'].validate((valid) => {
                debugger
                //valid==true，怎么验证都是通过
            })
        }
    }
}
</script>

Answer 1

首先使用方式就有问题, element-ui 验证逻辑是在 el-form-item 组件中做的, 把代码修改成如下即可：

    <el-table-column label="名称">
        <template scope="scope">
            <el-form-item 
                :rules="{
                    required: true, message: '名称不能为空', trigger: 'blur'
                }" 
                :prop="'pers.' + scope.$index + '.name'"
            >
                <el-input 
                    :placeholder="'pers.' + scope.$index + '.name'" 
                    v-model="scope.row.name" clearable>
                </el-input>
            </el-form-item>
        </template>
    </el-table-column>

这里只改了一项，其它照样修改就行. 修改后效果如下：