Element表单嵌套树形表格的校验问题

如图,第一次遇到属性表格的校验问题

Element表单嵌套树形表格的校验问题_第1张图片

 曾经写过单纯的表格校验是这样的


      
        
        
          
        
      
    

如果把表格换成树结构就会发现校验不行了,因为

tableData.${$index}.realname

只能校验第一层的,所以需要动态拼接prop的值,如拼接成 

tableData.0.realname //第一层

tableData.0.children.0.realname   //第二层

所以,我是prop里调了方法,其中用了递归查找位置并拼接

如(vue3  ts版本)

:prop="'tableData.' + getPropPosi(row) + '.name'"

// 获取prop位置
const getPropPosi = (row: IResponseData) => {
    let posi = findPosi(formData.value.tableData, row, '', '')

    return posi
}
// 递归查找位置
const findPosi = (list: IResponseData[], row: IResponseData, posi: string, current: string): string => {
    for (let i = 0; i < list.length; i++) {
        if (list[i].uuid == row.uuid) {
            return current + i
        }
        if (list[i].children && list[i].children?.length) {
            posi = findPosi(list[i].children || [], row, posi, i + posi + '.children.')
        }
    }
    return posi
}

如各位看客大佬还有其他方法,也可以教教我 O(∩_∩)O

你可能感兴趣的:(vue3,vue,vue.js,elementui,前端)