element-ui 解决 table 里包含表单验证的问题！

淩亂°似流年 2022-01-05 14:39 621阅读 0赞

实际项目中的场景，需要在table里做表单的验证，如图效果：

![337731-20180813192501471-1413953412.png][]

**其实问题关键就在于如何给el-form-item动态绑定prop**

**:prop="'tableData.' + scope.$index + '.字段名'"**

详见代码：

<template>
        <div v-bgb-block>
            <div style="margin-top:10px;">
                <el-form :rules="model.rules" :model="model"  ref="form">
                    
                    <el-table
                    border
                    :data="model.tableData"
                    style="width: 100%;"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                    <el-table-column
                        width="100px"
                        label="要求批次">
                        <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.input'" :rules='model.rules.name'>
                                    <el-input style="width:80px"  v-model="scope.row.input" ></el-input>
                                </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="180px"
                        label="要求供应商">
                        <template slot-scope="scope">
                                <el-form-item :prop="'tableData.' + scope.$index + '.supplier'" :rules='model.rules.supplier'>
                                    <el-select style="width:130px" v-model="scope.row.supplier" placeholder="请选择要求供应商"></el-select>
                                </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="180px"
                        label="要求生产日期">
                            <template slot-scope="scope">
                                    <el-form-item :prop="'tableData.' + scope.$index + '.producedate.start'" :rules='model.rules["producedate.start"]'>
                                        <bingobox-datepicker type="date" :model="scope.row.producedate" ></bingobox-datepicker>
                                    </el-form-item>
                            </template>
                        </el-table-column>
                    <el-table-column
                        width="180px"
                        label="要求有效期至">
                            <template slot-scope="scope">
                                    <el-form-item :prop="'tableData.' + scope.$index + '.expireddate.start'" :rules='model.rules["expireddate.start"]'>
                                        <bingobox-datepicker type="date" :model="scope.row.expireddate" ></bingobox-datepicker>
                                    </el-form-item>
                            </template>
                    </el-table-column>
                    <el-table-column
                        width="150px"
                        label="要求商品形态">
                            <template slot-scope="scope">
                                    <el-form-item :prop="'tableData.' + scope.$index + '.goodstatus'" :rules='model.rules.goodstatus'>
                                        <el-select style="width:130px" v-model="scope.row.goodstatus" placeholder="请选择商品形态"></el-select>
                                    </el-form-item>
                            </template>
                    </el-table-column>
                    <el-table-column
                        width="100px"
                        label="期待出库数量">
                            <template slot-scope="scope">
                                    <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules='model.rules.name'>
                                        <el-input style="width:80px"  v-model="scope.row.name" ></el-input>
                                    </el-form-item>
                            </template>
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button size="small" v-button-color>删除</el-button>
                            </template>
                    </el-table-column>
                </el-table>
                </el-form>
            </div>
        </div>
    </template>

<script>
    export default {
        data(){
            return {
                form:{
                    supplier2:"",
                    type:"",
                    desc:"",
                    input:""
                },
                model:{
                    rules: {
                        name:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                        input:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                        supplier:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                        goodstatus:{ type:"string",required:true,message:"必填字段",trigger:"change"},
                        "producedate.start":{ type:"string",required:true,message:"必填字段",trigger:"change"},
                        "expireddate.start":{ type:"string",required:true,message:"必填字段",trigger:"change"}
                    },
                    tableData:[{
                        input:"",
                        name:"",
                        supplier:"",
                        goodstatus:"",
                        producedate:{
                            start:""
                        },
                        expireddate:{
                            start:""
                        }
                    },{
                        input:"",
                        name:"",
                        supplier:"",
                        goodstatus:"",
                        producedate:{
                            start:""
                        },
                        expireddate:{
                            start:""
                        }
                    }]
                }
            }
        },
        methods: {
            add () {
                console.log(this.form);
            },
            save () {
                this.$refs["form"].validate((valid,model)=>{
                    console.log(valid);
                    console.log(model);
                })
            }
        }
    }
    </script>

转载于:https://www.cnblogs.com/Kummy/p/9470393.html

[337731-20180813192501471-1413953412.png]: /images/20211228/4d787258ba16407e937ee2acd05d1917.png

发表评论取消回复

表情：

评论列表（有 0 条评论，621人围观）

还没有评论，来说两句吧...

相关阅读

相关 ElementUI之CUD+表单验证

![76896d430d554fe795fdfe74e12272d0.jpeg][] 一.ELementUI之CUD 后端CUD编写 @Control

Dear 丶/ 2024年02月23日 04:15/ 0 赞/ 64 阅读

相关 form表单包含form表单的校验问题

表单内部表单校验问题当表单下面还嵌套表单的时候这个校验就不能走正常的校验了思路： 1.可以在外部表单校验之前先手动校验内部表单（适用于内部表单比较简单的情况），

朴灿烈づ我的快乐病毒、/ 2022年12月17日 08:49/ 0 赞/ 243 阅读

相关 elementui表单密码强度自定义验证

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年11月27日 08:54/ 0 赞/ 373 阅读

相关 ElementUI的form表单验证事件

用过了elementUi的表单验证、表单提交之后，个人觉得不是太建议使用。第一：和我们自己写js的繁琐程度差不多，第二，还要读文档增加了学习时间和成本。废话不多说，直接上

旧城等待，/ 2022年05月17日 00:43/ 0 赞/ 290 阅读

相关 elementui之表单验证

1.举例子 [{text:""},{text:''},.......] <el-form-item

Dear 丶/ 2022年04月24日 10:42/ 0 赞/ 236 阅读

相关 vue+elementui 对话框取消表单验证重置

最近在写增删改查，在新增的时候要弹出对话框填写form表单信息，发现对话框右上角的小X和右下角的取消不是一个事件，我想在点击它们两个的时候都可以重置表单，最终解决，如下。 v

Myth丶恋晨/ 2022年04月18日 01:21/ 0 赞/ 504 阅读

相关 elementui 自定义表单验证邮箱、电话号码

1.html部分: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125

拼搏现实的明天。/ 2022年03月11日 10:16/ 0 赞/ 1093 阅读

相关 elementUI自带的表单验证---解决特定情况下忽略指定表单项的验证

html部分 <el-form :model="form" :rules="rules" ref="form" label-width="100px">

淩亂°似流年/ 2022年02月28日 11:16/ 0 赞/ 818 阅读

相关 element-ui 解决 table 里包含表单验证的问题！

实际项目中的场景，需要在table里做表单的验证，如图效果： ![337731-20180813192501471-1413953412.png][] 其实问题关键就

淩亂°似流年/ 2022年01月05日 14:39/ 0 赞/ 622 阅读

相关 elementUI表单验证数字时失效

在写vue+elementUI项目的时候遇到了验证数字失败的问题，解决办法：用‘.number’修饰v-model，例子如下： <el-form-item lab

心已赠人/ 2021年12月12日 15:47/ 0 赞/ 585 阅读