element-u i表格内表单验证-by 于十月-蒲公英云

element-u i表格内表单验证-by 于十月

需求背景

有时候我们会有这么一种需求就是动态的去追加一行删减一行表格row，然在在row里面又会有多个表单控件，并且这个控件都是需要进行校验的，比如必须填写，手机号校验等等。

format_png

实现思路 .vue

data

data() {

    return { 
        teamGroups: { 
            rules: { 
                teamName: [{  required: true, message: '请输入成员名称', trigger: 'blur' }],
                phone: [{  required: true, message: '请输入手机号', trigger: 'blur' }],
                address: [{  required: true, message: '请输入地址', trigger: 'blur' }]
            },
            tableData: []
        }
    }
}

template

<el-table :data="teamGroups.tableData">
    <el-table-column label="姓名" align="center" header-align="center">
        <template slot-scope="cope">
            <el-form-item :prop="'tableData.' + scope.$index + '.teamName'" :rules="teamGroups.rules.teamname">
            <el-input size="mini" v-model="scope.row.teamName"></el-input>
        </el-form-item>
        </template>
    </el-table-column>
</el-table>