如何对el-table非当前页进行表格校验？

Question

背景：
el-form中对于el-table进行校验。el-table进行了前端分页，但是表单校验只能进行当前页的校验，比如el-table总共有14条数据，每页有10条数据，如果第二页的第二条有个字段没填，当时提交验证时，当前页在第一页，此时第二页的验证就忽略了，如何对非当前页进行表格校验？

Answer 1

你可以在每次分页切换时进行校验，并将校验结果保存起来，确保在提交表单时能够检查所有页的校验结果。以下是一个详细的例子：

示例代码

1. 组件方法：
在组件中定义一个 handlePageChange 方法，该方法在每次分页切换时调用 validate 方法进行校验，并将结果保存到 pageValidations 对象中。

data() {
    return {
        pageValidations: {}
    };
},

methods: {
    handlePageChange(page) {
        this.$refs['form'].validate((valid) => {
            if (valid) {
                this.pageValidations[page] = true;
            } else {
                this.pageValidations[page] = false;
            }
        });
    },

    validateAllPages() {
        // 校验所有页
        const allValid = Object.values(this.pageValidations).every(valid => valid);
        return allValid;
    },

    submitForm() {
        if (this.validateAllPages()) {
            // 提交表单
            console.log("提交表单");
        } else {
            console.log("校验未通过");
        }
    }
}

2. 监听分页切换：
假设你使用的是一个分页组件，可以在分页切换时调用 handlePageChange 方法。

<template>
    <div>
        <el-pagination
            @current-change="handlePageChange"
        />
        
        <el-form ref="form">
            <!-- 表单内容 -->
        </el-form>

        <button @click="submitForm">提交</button>
    </div>
</template>

3. 表单验证：
确保在每次分页切换时进行表单验证，并将结果保存到 pageValidations 中。

总结

这样就可以确保在每次分页切换时进行校验，并将结果保存起来。在提交表单时，检查所有页的校验结果。如果有任何页面未通过校验，可以阻止表单提交并提醒用户进行修正。