element el-table el-form

使用el-table加el-form进行表单校验

1. html

<template>
    <div class="table-form">
        {{ tableFormData }}
        <div style="margin-right: 0;">
            <el-button type="primary" @click="add">新增</el-button>
        </div>
        <el-form :model="tableFormData" ref="ruleForm" label-width="0px">
            <el-table
                :data="tableFormData.tableData"
                border
                style="width: 100%">
                <el-table-column label="日期">
                    <template slot-scope="scope">
                        <el-form-item label="" :prop="`tableData[${scope.$index}].date`" :rules="rules.date">
                            <el-date-picker
                                v-model="scope.row.date"
                                value-format="yyyy-MM-dd"
                                type="date"
                                placeholder="选择日期"/>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">
                        <el-form-item label="" :prop="`tableData[${scope.$index}].name`" :rules="rules.name">
                            <el-input type="input" v-model="scope.row.name"/>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column label="地址">
                    <template slot-scope="scope">
                        <el-form-item label="" :prop="`tableData[${scope.$index}].address`" :rules="rules.address">
                            <el-input type="textarea" v-model="scope.row.address"/>
                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <div>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
    </div>
</template>

2. js

<script>
    export default {
        name: 'DemoPage',
        components: {},
        data () {
            return {
                tableFormData: {
                    tableData: [
                        {
                            date: '',
                            name: '',
                            address: ''
                        }
                    ]
                },
                rules: {
                    date: [
                        {required: true, message: '日期', trigger: 'change'},
                    ],
                    name: [
                        {required: true, message: '姓名', trigger: 'blur'},
                    ],
                    address: [
                        {required: true, message: '地址', trigger: 'blur'},
                    ],
                }
            };
        },
        methods: {
            add () {
                this.tableFormData.tableData.push(
                    {
                        date: '',
                        name: '',
                        address: ''
                    }
                );
            },
            submitForm (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$message.success('校验通过');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm (formName) {
                this.$refs[formName].resetFields();
            }
        }
    };
</script>

运行结果