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

news2024/9/28 1:26:09

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

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

<el-form ref="forms" :model="forms">
      <el-table ref="multipleTable" :data="forms.tableData" tooltip-effect="dark" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="姓名" width="80">
          <template #default="{ row, $index }">
            <el-form-item :prop="`tableData.${$index}.realname`" :rules="rules.realname">
              <el-input type="text" placeholder="输入姓名" v-model="row.realname"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/366806.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于iframe一些通讯的记录(可适用工作流审批)

一.知识点(1).我们可以通过postMessage(发送方)和onmessage(接收方)这两个HTML5的方法, 来解决跨页面通信问题&#xff0c;或者通过iframe嵌套的不同页面之间的通信a.父页面代码如下<div v-if"src" class"iframe"><iframeref"iframe"id…

SpringBoot集成Redis实现分布式会话

在单体应用的时代&#xff0c;Session 会话直接保存在服务器中&#xff0c;实现非常简单&#xff0c;但是随着微服务的流行&#xff0c;现代应用架构基本都是分布式架构&#xff0c;请求随机的分配到后端的多个应用中&#xff0c;此时session就需要共享&#xff0c;而存储在red…

【运动控制】CNC三轴小线段路径规划

CNC三轴小线段路径规划 文章目录CNC三轴小线段路径规划一、项目说明二、具体实现1、速度规划2、小线段插补3、运动学逆解刀轴插补点4、差分处理得到实际的速度和加速度5、加速度滑动平均6、实现的效果如图所示三、Reference写在前面&#xff0c;本文是作为一个练手小项目的总结…

2023年阿里云ECS服务器S6/C6/G6/N4/R6/sn2ne/sn1ne/se1ne处理器CPU性能详解

阿里云ECS服务器S6/C6/G6/N4/R6/sn2ne/sn1ne/se1ne处理器CPU性能怎么样&#xff1f;阿里云服务器优惠活动机型有云服务器S6、计算型C6、通用型G6、内存型R6、云服务器N4、云服务器sn2ne、云服务器sn1ne、云服务器se1ne处理器CPU性能详解及使用场景说明。 1、阿里云服务器活动机…

Ollydbg简明使用指南

OllyDebug&#xff0c;简称OD&#xff0c;一种反汇编软件&#xff0c;动态追踪工具&#xff0c;将IDA与SoftICE结合起来的思想&#xff0c;Ring 3 级的调试器。OllyDebug的使用界面是可视化操作。 英文版 Read this for quick start. Consult help file for details and more …

Hive窗口函数

概述 窗口函数&#xff08;window functions&#xff09;也叫开窗函数、OLAP函数。 如果函数具有over子句&#xff0c;则它是窗口函数 窗口函数可以简单地解释为类似于聚合函数的计算函数&#xff0c;但是通过group by 子句组合的 常规聚合会隐藏正在聚合的各个…

task与function

task和function主要是有助于代码的可重用性&#xff0c;都可以在module-endmodule之外声明。 1.function 1.1.function逻辑的综合 function&#xff1a;一个只有1个wire型输出值、全是组合逻辑的函数&#xff0c;且函数名即输出信号名&#xff0c;小括号中按顺序例化输入信号。…

C语言中#include<...>和#include“...“的区别

C语言文章更新目录 C语言学习资源汇总&#xff0c;史上最全面总结&#xff0c;没有之一 C/C学习资源&#xff08;百度云盘链接&#xff09; 计算机二级资料&#xff08;过级专用&#xff09; C语言学习路线&#xff08;从入门到实战&#xff09; 编写C语言程序的7个步骤和编程…

深入浅出C++ ——哈希的应用

文章目录一、位图1. 位图的概念2. STL中的位图3. 位图的特点4. 位图的应用5. 位图的实现6. 位图的使用二、布隆过滤器1. 布隆过滤器提出2. 布隆过滤器概念3. 布隆过滤器的设计思路4. 布隆过滤器的插入5. 布隆过滤器的查找6. 布隆过滤器删除7. 布隆过滤器的优缺点8. 布隆过滤器的…

div增加鼠标点透,css设置点击穿透

需求&#xff1a;将一张照片盖到一个div上面&#xff0c;但同时下面div上面的点击事件不受影响。 这样就需要用到 CSS 的鼠标穿透属性&#xff1a;pointer-events: none&#xff0c;下面主要对pointer-events属性的值做一个简单的介绍。 pointer-event的所有属性值: pointer…

计讯物联环保数采仪全系列产品为节能降耗减碳贡献绿色力量

政策背景 近日&#xff0c;工业和信息化部、国家发展改革委、生态环境部三部门联合印发《工业领域碳达峰实施方案》&#xff08;以下简称“方案”&#xff09;。《方案》提出&#xff0c;促进中小企业绿色低碳发展。优化中小企业资源配置和生产模式&#xff0c;探索开展绿色低…

在字节跳动,造赛博古籍

“你在字节跳动哪个业务&#xff1f;”“古籍数字化。把《论语》《左传》《道德经》这些古籍变成电子版&#xff0c;让大家都能免费看。”没错&#xff0c;除了你熟悉的那些 App&#xff0c;字节跳动还在做一些小众而特别的事情&#xff0c;古籍数字化就是其中之一。在字节跳动…

Python+Selenium4元素交互1_web自动化(5)

目录 0. 上节回顾 1. 内置的等待条件 2. 元素属性 1. Python对象属性 2. HTML元素属性 3. 元素的交互 1. 输入框 2. 按钮 3. 单选框和复选框 0. 上节回顾 DEBUG的方式&#xff1a;JS断点 Python断点编程语言提供的等待方式&#xff1a;sleepselenium提供的等待方式&…

CDGA|浅谈“以治促用,以用促治”的数据治理战略

数据治理夯实企业数字化转型基础。采取“以治促用&#xff0c;以用促治”的数据治理战略&#xff0c;可以充分释放了企业核心运行要素的活力。 “以治促用”是指通过建立在数据治理链路及用户多维评估系统的基础上&#xff0c;对数据资产重新进行价值识别&#xff0c;推进高价值…

30岁测试开发年薪不足50万,被面试官嘲讽混得太差?

近日&#xff0c;有网友发帖称&#xff1a;“30岁去应聘测试开发&#xff0c;拿不到七八十万的年薪确实有点丢人了&#xff0c;还被面试官diss混得太差了”&#xff0c;网友们看完都炸了。 来看看网友们都是怎么说的。 有网友说&#xff1a; 扯淡 有网友气到&#xff1a; 那拿…

接口自动化

为了实现真正意义上的接口自动化&#xff0c;一般使用yaml文件存储测试用例&#xff0c;代码调用里面的数据来发送请求 Controller RequestMapping("/send") public class Login {ResponseBodyRequestMapping("/login")public State login(String name,Str…

ES6-ES11基本全部语法

在进入es6语法之前&#xff0c;先走一波es5遍历迭代Api&#xff0c;&#xff0c;它们的作用&#xff0c;应用场景&#xff0c;参数&#xff0c;以及返回值分别是什么。&#xff08;forEach、map、some、every、filter&#xff09;我们统一设定一个初始数组&#xff1a;let arra…

Prophet 处理时间序列数据

Prophet 处理时间序列数据 flyfish 论文地址 https://peerj.com/preprints/3190/ 官网 https://facebook.github.io/prophet/ 源码地址 https://github.com/facebook/prophet hon import pandas as pd from prophet import Prophet df pd.read_csv(https://raw.githubuse…

2月23号作业

题目&#xff1a;题目一&#xff1a;通过操作Cortex-A7核&#xff0c;串口输入相应的命令&#xff0c;控制LED灯进行工作--->上传CSDN 1.例如在串口输入led1on,开饭led1灯点亮 2.例如在串口输入led1off,开饭led1灯熄灭 3.例如在串口输入led2on,开饭led2灯点亮 4.例如在串口输…

[HarekazeCTF2019]Easy Notes

知识点&#xff1a;session 反序列化&#xff0c;代码审计代码分析 flag.php 中有个 is_admin 函数的判断。 在 lib.php 中有 is_admin 函数&#xff0c;需要 session[admin] 为 true&#xff0c;或者通过文件读取的方式。 在 index.php 中的 include 并不能使用伪协议读取 …