vue+element-ui实现el-form包含el-table的表单验证

Question

问题描述

现需要在表单提交前验证数据是否符合规则，按照element文档可以实现验证简单结构的的el-form。但是当el-form内包含el-table时无法对el-table中的元素进行验证。
表单结构如下：

现在可以实现对清单上方元素进行验证，但是无法对清单内元素进行验证。网上找到过很多例子，但是都是残缺的一直没有办法实现此功能。希望有人帮忙提出解决方案或完整解决方案的地址，如果有实现案例必将感激不尽！

Answer 1

我写了一个demo看看合适吗
https://codepen.io/voggen/pen...

Answer 2

举个栗子吧

export default {
    data() {
        return {
            // 表格columns
            columns: [
                { 
                    title: '测试表单验证'，
                    render: h => h('FormItem', {
                        props: {
                            // 校验的字段
                            prop: 'xxxx',
                            // 校验的规则
                            rules: [],
                        },
                    }, [
                        // 表单元素
                        h('input'),
                    ]),
                },
            ],
        }
    },
}