vue element 多层循环嵌套的表单校验

最近vue2遇到的问题

有一个数据结构是多层嵌套

var level1list = [
    {
        name: 'level1-1',
        level2List:[
            {
                name: 'level2-1',
                level3List:[
                    {
                        name: 'level3-1',
                        value: ''
                    },
                    {
                        name: 'level3-2',
                        value: ''
                    },
                ]
            },
            {
                name: 'level2-2',
                level3List:[
                    {
                        name: 'level3-1',
                        value: ''
                    },
                    {
                        name: 'level3-2',
                        value: ''
                    },
                ]
            },
        ]
    },
    {
        name: 'level1-2',
        level2List:[
            {
                name: 'level2-1',
                level3List:[
                    {
                        name: 'level3-1',
                        value: ''
                    },
                    {
                        name: 'level3-2',
                        value: ''
                    },
                ]
            },
            {
                name: 'level2-2',
                level3List:[
                    {
                        name: 'level3-1',
                        value: ''
                    },
                    {
                        name: 'level3-2',
                        value: ''
                    },
                ]
            },
        ]
    },
]

<el-form :model="level1list" ref='wewe'>
    <div v-for="(l1, l1Index) in level1list">
        <el-row v-for="(l2, l2Index) in l1.level2list">
            <el-col v-for="(l3item, l3Index) in l2.level3list">
             <el-form-item :rules="l3item.rules" :prop="`level2list${l1Index}.level2list${l2Index}.level3list${l3Index}.value`">
                <input v-model="l3item.value"></input>
             </el-form-item>
            </el-col>
        </el-row>
    </div>
</el-form>

重点在于rules可以直接写到el-form-item上，prop需要根据层级来制定数据位置所在。

大体方向是这样的，以上代码未经测试，只适用于个人解决问题后的记录。