当前位置: 首页 > Web前端 > vue.js

el-table树形表单验证,js树形列表生成序号

时间:2023-04-01 01:55:55 vue.js

树形表单验证预览树形列表生成序号首先需要生成一个序号来确定表单验证的目标行,通过广度优先遍历,开始以1,1.1,1.1.1规则生成索引,为树列表确定唯一值,因为列表本身可以是CURD,所以每次需要的item都需要重新调用生成索引的方法列表增加或减少。constsetIndex=(data)=>{letqueue=[...data];让循环=0;while(queue.length>0){loop++[...queue].forEach((child,i)=>{queue.shift()if(loop==1){child.customIndex=i+1+"";child.currentIndex=i;child.path=i;}if(child.children&&child.children.length>0){child.dataType=1for(letci=0;ci深度优先:{{`rows${getPathByKey(row.customIndex,"customIndex",form.rows)}.name`}}实现方法,表单校验本质上是对目标数据的路径搜索,当el-form-item上的prop没有匹配到正确的目标时,无法正常触发校验因此,需要在每一行记录属性路径,即实现在每一行记录属性(名称,地址)路径的方法(PS:可以直接在setIndex方法中记录路径,即path)深度优先:constgetPathByKey=(value,key,arr)=>{lettemppath=[];letrealPath=""try{functiongetNodePath(node){temppath.push(node.currentIndex);//找到满足条件的节点,通过throw终止递归if(node[key]===value){temppath.forEach((v,i)=>{if(i==0){realPath+="."+v}else{realPath+=`.children.${v}`}})//temppath=temppath.join(",")throw("GOTIT!");//返回;}如果(node.children&&node.children.length>0){对于(vari=0;i