When working with Element UI tables contaiinng required form fields in each row, validation can be implemented using the cell-class-name property to dynamically apply error styling to empty fields.

<el-table-column prop="userAge" label="Age">
    <template slot-scope="{ row }">
        <el-input v-model="row.userAge" />
        <div class="error-message">Age is required</div>
    </template>
</el-table-column>
<el-table-column prop="description" label="Description">
    <template slot-scope="{ row }">
        <el-input size="mini" type="textarea" v-model.trim="row.description" />
        <div class="error-message">Description is required</div>
    </template>
</el-table-column>

.error-message {
    display: none;
    font-size: 12px;
}

Validation logic during form submission:

validateTable() {
    const hasEmptyFields = this.tableData.some(item => 
        !item.userAge || !item.description
    );
    
    if (hasEmptyFields) {
        this.cellClass = ({ row, columnIndex }) => {
            if ((!row.userAge && columnIndex === 0) || 
                (!row.description && columnIndex === 1)) {
                return 'validation-error';
            }
        };
        return false;
    }
    return true;
}

Error styling for validation failures:

.validation-error {
    .el-input__inner {
        border-color: #f56c6c !important;
    }
    .error-message {
        display: block;
        color: #f56c6c;
    }
}

Copmlete implementation example:

<template>
    <div class="container">
        <el-table :data="tableData" :cell-class-name="cellClass">
            <el-table-column prop="userAge" label="Age">
                <template slot-scope="{ row }">
                    <el-input v-model="row.userAge" />
                    <div class="error-message">Age is required</div>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="Description">
                <template slot-scope="{ row }">
                    <el-input size="mini" type="textarea" v-model.trim="row.description" />
                    <div class="error-message">Description is required</div>
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="handleSubmit">Submit</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { userAge: '25', description: 'Sample data' },
                { userAge: '30', description: '' },
                { userAge: '', description: 'Another entry' }
            ],
            cellClass: null
        };
    },
    methods: {
        handleSubmit() {
            if (!this.validateTable()) {
                return;
            }
            console.log('Validation passed');
        },
        validateTable() {
            const hasEmptyFields = this.tableData.some(item => 
                !item.userAge || !item.description
            );
            
            if (hasEmptyFields) {
                this.cellClass = ({ row, columnIndex }) => {
                    if ((!row.userAge && columnIndex === 0) || 
                        (!row.description && columnIndex === 1)) {
                        return 'validation-error';
                    }
                };
                return false;
            }
            return true;
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep.container {
    .error-message {
        display: none;
        font-size: 12px;
    }
    .validation-error {
        .el-input__inner {
            border-color: #f56c6c !important;
        }
        .error-message {
            display: block;
            color: #f56c6c;
        }
    }
}
</style>