[前端]-表格中的表单验证，就是在将表格放在表单中，将表格绑定的数据也放在表单中。最重要的是要给表格中需要验证的字段动态添加prop，再给其绑定规则。

本文链接：https://blog.youkuaiyun.com/William_Han1989/article/details/88636890

本文探讨了在前端开发中如何实现表格内的表单验证，关键在于为表格中需验证的字段动态添加prop属性，并结合规则进行绑定，确保数据有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form :model="tableForm" ref="tableForm">
        <el-table
            class="bankTable" 
            :data="tableForm.bankData" 
            border 
            style="width: 100%;margin:20px 0;"
            @selection-change="handleSelectionChange">

            <el-table-column type="selection" width="55"></el-table-column>

            <el-table-column prop="BANKA" label="开户行名称" width='250' show-overflow-tooltip></el-table-column>

            <el-table-column label="银行所在省">
                <template slot-scope="scope">
                    <el-form-item :prop="`bankData.${scope.$index}.KHHSF`"  :rules="tableRules.KHHSF">
                    <el-input v-model="scope.row.KHHSF" :disabled="scope.row.search"></el-input>
                    </el-form-item>
                </template>
            </el-table-column>

            <el-table-column prop="KHHDS" label="银行所在市">
                <template slot-scope="scope">
                    <el-form-item :prop="`bankData.${scope.$index}.KHHDS`"  :rules="tableRules.KHHDS">
                        <el-input v-model="scope.row.KHHDS" :disabled="scope.row.search"></el-input>
                    </el-form-item>
                </template>
            </el-table-column>

            <el-table-column prop="BANKN" label="银行账号">
                <template slot-scope="scope">
                    <el-form-item>
                    <el-input v-model="scope.row.BANKN" :disabled="scope.row.search"></el-input>
                    </el-form-item>
                </template>
            </el-table-column>

            <el-table-column prop="KOINH" label="户主">

            </el-table-column>

        </el-table>
        </el-form>

    data() {
    return {
        tableForm:{
            bankData:[
                            {
                                BANKA:'',
                                KHHSF:'',
                                KHHDS:'',
                                BANKN:'',
                                KOINH:'',
                            }
                        ],
        },
                tableRules:{
            //银行所在省
            KHHSF:[
                { required: true, message: '请输入银行所在省'},
                { max: 20, message: '长度在20个字符以内',}
            ],
            //银行所在市
            KHHDS:[
                { required: true, message: '请输入银行所在省'},
                { max: 20, message: '长度在20个字符以内'}
            ]
        },
        }
    }

原文地址:https://www.cnblogs.com/yinxingen/p/10042665.html