elementui表格编辑校验

1.实现的效果

2.实现思路

①在表单<el-from>里面嵌套表格<el-table>.

②表格里面 <template>包裹表单.

③ 表单的:model绑定一个对象,表格数据绑定的是表单对象中的一个数组.

3.具体代码

  <el-form class="form" size="mini" :model="ruleForm" ref="ruleForm">
                        <el-table
                            :data="ruleForm.tableData"
                            border
                            style="width: 100%"
                            @selection-change="handleSelectionChange"
                        >
                            <el-table-column type="selection" width="40" align="center">
                            </el-table-column>
                            <el-table-column prop="wlbm" label="物料编码" align="center">
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.wlbm'"
                                        :rules="isRules.wlbm"
                                    >
                                        <el-input
                                            v-model="scope.row.wlbm"
                                            :controls="false"
                                            style="width: 80px"
                                        ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="pch"
                                label="批次号"
                                show-overflow-tooltip
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.pch'"
                                        :rules="isRules.pch"
                                    >
                                        <el-input
                                            v-model="scope.row.pch"
                                            :controls="false"
                                            :precision="2"
                                            style="width: 80px"
                                        ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="hth" label="合同号" align="center">
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.hth'"
                                        :rules="isRules.hth"
                                    >
                                        <el-input
                                            v-model="scope.row.hth"
                                            :controls="false"
                                            :precision="2"
                                            style="width: 80px"
                                        ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="gysmc" label="供应商名称" align="center">
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.gysmc'"
                                        :rules="isRules.gysmc"
                                    >
                                        <el-input
                                            v-model="scope.row.gysmc"
                                            :controls="false"
                                            style="width: 100%"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="cgfs"
                                label="采购方式"
                                show-overflow-tooltip
                                align="center"
                            >
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.cgfs'"
                                        :rules="isRules.cgfs"
                                    >
                                        <vDictionary
                                            :item="scope"
                                            keyName="cgfs"
                                            :selectedCode="scope.row.cgfs"
                                            send-data="zbj.cgfs"
                                            @getSelectValue="getFromData"
                                        >
                                        </vDictionary>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wlmc" label="物料名称及规格" align="center">
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.wlmc'"
                                        :rules="isRules.wlmc"
                                    >
                                        <el-input
                                            v-model="scope.row.wlmc"
                                            :controls="false"
                                            style="width: 100%"
                                            clearable
                                        ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wldw" label="单位" align="center">
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.wldw'"
                                        :rules="isRules.wldw"
                                    >
                                        <el-input
                                            v-model="scope.row.wldw"
                                            :controls="false"
                                            :precision="2"
                                            style="width: 80px"
                                        ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wlsl" label="数量" align="center">
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.wlsl'"
                                        :rules="isRules.wlsl"
                                    >
                                        <el-input-number
                                            v-model="scope.row.wlsl"
                                            :controls="false"
                                            :precision="2"
                                            style="width: 80px"
                                        ></el-input-number>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wldj" label="单价(元)" align="center">
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.wldj'"
                                        :rules="isRules.wldj"
                                    >
                                        <el-input-number
                                            v-model="scope.row.wldj"
                                            :controls="false"
                                            :precision="2"
                                            style="width: 80px"
                                        ></el-input-number>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="zj" label="总价(元)" align="center">
                                <template slot-scope="scope">
                                    <el-form-item prop="zj">
                                        <el-input-number
                                            v-model="scope.row.zj"
                                            :controls="false"
                                            :precision="2"
                                            style="width: 80px"
                                        ></el-input-number>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="wtms" label="问题描述" align="center">
                                <template slot-scope="scope">
                                    <el-form-item
                                        :prop="'tableData.' + scope.$index + '.wtms'"
                                        :rules="isRules.wtms"
                                    >
                                        <el-input
                                            v-model="scope.row.wtms"
                                            :controls="false"
                                            style="width: 80px"
                                        ></el-input>
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column prop="processmc" label="操作" align="center">
                                <template slot-scope="scope">
                                    <template>
                                        <el-button
                                            type="text"
                                            @click="handelDelte(scope.row, scope.$index)"
                                        >
                                            删除
                                        </el-button>
                                    </template>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>

校验的代码:
 isRules: {
                wlbm: [{ required: true, message: '请输入!', trigger: 'blur' }],
                pch: [{ required: true, message: '请输入!', trigger: 'blur' }],
                hth: [{ required: true, message: '请输入!', trigger: 'blur' }],
                gysmc: [{ required: true, message: '请输入!', trigger: 'blur' }],
                cgfs: [{ required: true, message: '请输入!', trigger: 'change' }],
                wldw: [{ required: true, message: '请输入!', trigger: 'blur' }],
                wlsl: [{ required: true, message: '请输入!', trigger: 'blur' }],
                wldj: [{ required: true, message: '请输入!', trigger: 'blur' }],
                wtms: [{ required: true, message: '请输入!', trigger: 'blur' }],
                wlmc: [{ required: true, message: '请输入!', trigger: 'blur' }],
            },
          this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                   alert('保存')
                } else {
                    this.$message.warning('物料信息填写不完整!')
                    return false
                }
            })

4.代码借鉴:element可编辑表格验证问题解决_编程网

感谢大神的分享,能让如我小白,有可以借鉴的地方! 此记录问题,若有更好的方法,愿各位大神不吝赐教!