Element表单嵌套树形表格的校验问题
创始人
2024-05-31 11:58:46
0

普通嵌套

表单和表格是项目中最常见的项目,有时候就会遇到表格嵌套表单的情况,比如
在这里插入图片描述
这种形式的其实挺好处理的,如下:





const states=reactive({tableData:[]
})

就按照上面的这种格式写就可以实现,因为是平级的,在表单校验时可以很容易的在表格数组中找到属性的值。

树形表格嵌套

最近把又碰见了树形表格嵌套的形式,如下图:
在这里插入图片描述
然后呢,就按照老套路那样写,结果一直校验不通过。最后发现是绑定的属性不对。以下面的代码为例

let list = [{id: "1",children: [{id: "1-1",children: [],},],},
];

id1-1的属性应该是list[0].children[0].id,所以问题就转换为如何获取到属性准确的路径问题
方法肯定是用递归,但是水平太低不会写(也就会写一点简单的递归)。

想到最近 new bing 这么火,我自己不会写,让new bing帮我写吧。结果真的给我写好了
在这里插入图片描述
当然 如果想要new bing给你答案的话,你需要准确的向他描述这个问题,你描述的越准确,他给你的答案越准确。反复尝试了很多次,最后给我了想要的答案。
下面是他给我的例子:

// 定义一个递归函数,接受一个对象或数组,一个目标id值和一个路径数组作为参数
function findPath(obj, targetId, path = []) {// 如果obj是数组,就遍历每个元素if (Array.isArray(obj)) {for (let i = 0; i < obj.length; i++) {// 将当前索引添加到路径数组中path.push(`[${i}]`);// 对当前元素递归调用findPath函数,并将结果赋值给resultlet result = findPath(obj[i], targetId, path);// 如果result不为空,说明找到了匹配的id,就返回resultif (result) return result;// 否则,就从路径数组中移除最后一个元素(即当前索引)path.pop();}}// 如果obj是对象,就遍历每个属性else if (typeof obj === "object") {for (let key in obj) {// 将当前键添加到路径数组中path.push(`.${key}`);// 对当前值递归调用findPath函数,并将结果赋值给resultlet result = findPath(obj[key], targetId, path);// 如果result不为空,说明找到了匹配的id,就返回resultif (result) return result;// 否则,就从路径数组中移除最后一个元素(即当前键)path.pop();}}// 如果obj是基本类型(如字符串、数字等),就判断是否等于目标idelse {// 如果相等,就将路径数组连接成字符串并返回if (obj === targetId) return path.join("");// 否则,就返回空字符串else return "";}
}// 定义一个测试用的列表对象
let list = [{id: "1",children: [{id: "1-1",children: [],},],},
];//删除最后的id
let str = findPath(list, "1-1")// 调用findPath函数,并打印结果list[0].children[0].id
console.log(str);

这里需要注意一个问题,函数的值必须是唯一的。这里id是唯一的,最后返回值里有一个id,如果不是想要的属性的话,可以使用replace函数替换一下。

下面是在事件项目里应用的代码