el-table动态新增行添加校验规则

<template>
    <el-dialog
    class="ready-dialog"
    title="table新增校验"
    :visible="true"
    :close-on-click-modal="false"
    width="60%"
    @close="$emit('closeDialog')"
    >
            <!-- 1. el-form包裹el-table -->
            <el-form ref="formName" :model="form">
                <el-table :data="form.reserveRechargeList" stripe border style="width: 100%" class="table-main">
                    <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                    <el-table-column label="充值金额" prop="amount" align="center">
                        <template slot-scope="scope">
                            <!-- 2. 绑定prop和rules -->
                            <el-form-item
                                size="small"
                                :prop="'reserveRechargeList.' + scope.$index + '.amount'"
                                :rules="rules.amount"
                            >
                                <span v-if="!scope.row.disabled">{{scope.row.amount}}</span>
                                <el-input v-else v-model="scope.row.amount" placeholder="请输入充值金额" size="mini"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="充值供应商" prop="supplier" align="center">
                        <template slot-scope="scope">
                            <el-form-item
                                size="small"
                                :prop="'reserveRechargeList.' + scope.$index + '.supplier'"
                                :rules="rules.supplier"
                            >
                                <span v-if="!scope.row.disabled">{{scope.row.supplier}}</span>
                                <el-input v-else v-model="scope.row.supplier" placeholder="请输入充值供应商" size="mini"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column prop="rechargeTime" label="充值时间" width="200" align="center">
                        <template slot-scope="scope">
                            <el-form-item
                                size="small"
                                :prop="'reserveRechargeList.' + scope.$index + '.rechargeTime'"
                                :rules="rules.rechargeTime"
                            >
                                <span v-if="!scope.row.disabled">{{scope.row.rechargeTime}}</span>
                                <el-date-picker
                                v-else
                                v-model="scope.row.rechargeTime"
                                type="datetime"
                                placeholder="选择充值时间"
                                style="width: 100%"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                size="mini">
                                </el-date-picker>
                            </el-form-item>
                            
                        </template>
                    </el-table-column>
                    <el-table-column prop="operatorName" label="操作人" align="center" width="100"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>
                    <el-table-column label="操作" width="120" align="center">
                        <template slot-scope="scope">
                            <el-popconfirm
                            v-if="scope.row.disabled"
                            title="确定删除吗？"
                            placement="top"
                            @confirm="delete_list(scope)"
                            >
                                <el-button slot="reference" type="text" style="color: red;">删除</el-button>
                            </el-popconfirm>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
            <div class="add-btn">
                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add_list">新增</el-button>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="$emit('closeDialog')">取 消</el-button>
            <el-button type="primary" @click="save">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'ReadyDialog',
    props: {
        modelValue: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        // 监听modelValue变化复制给当前绑定元素实现绑定
        modelValue: {
            immediate: true,
            handler(val) {
                this.form = val;
            }
        }
    },
     // 给modelValue绑定事件
    model: {
        prop: 'modelValue',
        event: 'getValue'
    },
    data() {
        return {
            form: {
                code: '',
                name: '',
                totalReserve: '',
                usableReserve: '',
                reserveRechargeList : []
            },
            rules: {
                amount: [
                    {
                        required: true,
                        message: "请输入充值金额",
                        trigger: ["blur", "change"],
                    }
                ],
                supplier: [
                    {
                        required: true,
                        message: "请输入充值供应商",
                        trigger: ["blur", "change"],
                    }
                ],
                rechargeTime: [
                    {
                        required: true,
                        message: "请选择充值时间",
                        trigger: ["change"],
                    }
                ]
            }
        }
    },
    methods: {
        // 新增表格
        add_list() {
            const user = JSON.parse(sessionStorage.getItem('user'))
            this.form.reserveRechargeList.push({
                amount: '',
                createTime: '',
                operatorName: user.nickname,
                disabled: true,
                rechargeTime: '',
                supplier: ''
            })
        },
        // 删除
        delete_list({$index}) {
            this.form.reserveRechargeList.splice($index, 1)
        },
        // 保存
        save() {
            // <!-- 3. 校验 -->
            this.$refs['formName'].validate((valid) => {
                if (valid) {
                    this.$emit('getValue', this.form)
                    this.$emit('save')
                } else {
                    return false;
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    .ready-ipt {
        width: 220px;
        margin: 20px 20px 20px 0;
    }
    .dialog-flex {
        width: 100%;
        display: flex;
        align-items: center;
        margin: 10px 0;
        span {
            margin-right: 20px;
        }
    }
    .table-title {
        margin-bottom: 20px;
        &-tip {
            color: red;
            font-size: 12px;
        }
    }
    .table-header {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .add-btn {
        width: 100%;
        padding: 20px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
    }
</style>
<style lang="scss">
    .ready-dialog {
        .el-dialog__header {
            border-bottom: 1px solid #eeeeee;
        }
    }
</style>

效果图

image.png
image.png