tdesign的使用记录

1、复杂表单校验

复杂类型的数据(两级数组)

const dataForm = ref({configTalkTemplateProblemCoList: [{"id":"1744302859557920769","templateId":"1744302859511783426","parentId":null,"level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":[{"id":"1744302859591475201","templateId":"1744302859511783426","parentId":"1744302859557920769","problem":"问题1","level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":null},{"id":"1744302859620835330","templateId":"1744302859511783426","parentId":"1744302859557920769","problem":"问题2","level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":null}],"classify":"分类一"},{"id":"1744302859658584065","templateId":"1744302859511783426","parentId":null,"level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":[{"id":"1744302859687944194","templateId":"1744302859511783426","parentId":"1744302859658584065","problem":"问题1","level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":null},{"id":"1744302859755053057","templateId":"1744302859511783426","parentId":"1744302859658584065","problem":"问题2","level":null,"deleted":"0","createTime":"2024-01-08 18:19:44","createUserId":"1001","createUserName":"admin","updateTime":"2024-01-08 18:19:44","updateUserId":null,"updateUserName":null,"tenantId":null,"list":null}],"classify":"分类2"}
]
}) 

表单写法

    <t-formref="formRef":data="dataForm":rules="dataRules"label-width="100px"label-align="right"reset-type="initial"@submit="onSubmit"><div class="question" v-for="(item, index) in dataForm.configTalkTemplateProblemCoList" :key="item.id" :label-width="0"><div class="content br12"><t-form-item label="问题分类" :name="`configTalkTemplateProblemCoList[${index}].classify`" requiredMark><t-input v-model="item.classify" placeholder="请输入问题分类" style="width: 400px" :readonly="props.isView"></t-input></t-form-item><t-form-item v-for="(v, i) in item.list" :key="v.id" label="问题" :name="`configTalkTemplateProblemCoList[${index}].list[${i}].problem`" requiredMark><t-textarea v-model="v.problem" placeholder="请输入问题" style="width: 400px" :readonly="props.isView"></t-textarea></t-form-item></div></div>
</t-form>

表单校验

const dataRules = {classify: [{ required: true, message: '请输入问题分类', type: 'error', trigger: 'blur' }],problem: [{ required: true, message: '请输入问题', type: 'error', trigger: 'blur' }],
};

注意:重点就是name属性必须是你的数据的属性开头,如configTalkTemplateProblemCoList,如果不用configTalkTemplateProblemCoList,直接用item或者v,是不行的。

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

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

相关文章

大创项目推荐 题目:基于LSTM的预测算法 - 股票预测 天气预测 房价预测

文章目录 0 简介1 基于 Keras 用 LSTM 网络做时间序列预测2 长短记忆网络3 LSTM 网络结构和原理3.1 LSTM核心思想3.2 遗忘门3.3 输入门3.4 输出门 4 基于LSTM的天气预测4.1 数据集4.2 预测示例 5 基于LSTM的股票价格预测5.1 数据集5.2 实现代码 6 lstm 预测航空旅客数目数据集预…

IO多路复用-epoll

IO多路复用-epoll 1. 概述 epoll 全称 eventpoll&#xff0c;是 linux 内核实现IO多路转接/复用&#xff08;IO multiplexing&#xff09;的一个实现。 epoll是select和poll的升级版&#xff0c;相较于这两个前辈&#xff0c;epoll改进了工作方式&#xff0c;因此它更加高效…

P9389 [THUPC 2023 决赛] 烂柯杯 题解

目录 题目背景题目描述输入格式输出格式提示提示题目来源 题目思路AC 代码 题目背景 却说庞统迤逦前进&#xff0c;抬头见两山逼窄&#xff0c;树木丛杂&#xff1b;又值夏末秋初&#xff0c;枝叶茂盛。庞统心下甚疑&#xff0c;勒住马问&#xff1a;“此处是何地&#xff1f;…

问题解决:使用el-upload组件获取File文件,不需要文件上传,action为空会请求本地路径报404

可以自定义上传方法、覆盖默认的上传行为 主要是这个属性 :http-request"uploadFn" <template><span><el-uploadaction"#":on-preview"handlePreview":on-remove"handleRemove":before-remove"beforeRemove"…

WorkPlus AI智能客服解决方案,提升企业服务质量

在当今竞争激烈的商业环境中&#xff0c;提供卓越的客户服务成为企业赢得市场竞争的关键。而AI智能客服技术的不断发展&#xff0c;则成为了提高服务效率和满意度的利器。作为一款领先的AI助理解决方案&#xff0c;WorkPlus AI助理以其出色的性能和智能化的功能&#xff0c;助力…

代码随想录算法训练营打卡day1 |704. 二分查找,27. 移除元素

一、LeetCode 704 二分查找 题目链接&#xff1a;704.二分查找 解法一&#xff1a;左闭右闭 class Solution {public int search(int[] nums, int target) {int left 0, right nums.length-1;while(left < right){ //边界处理&#xff0c;左闭右闭int mid left (right-l…

使用bat批量修改文件名

批处理脚本的目的是将指定文件夹中的所有 .mp3 文件的文件名中的数字部分补零成四位&#xff0c;并将文件重命名为新的文件名。以下是脚本的详细解释&#xff1a; echo off: 这个命令用于关闭命令回显&#xff0c;即在脚本运行时不在命令提示符窗口上显示执行的命令。 setloca…

c++入门学习(十八)赋值运算符

简单赋值运算符&#xff08;&#xff09;&#xff1a; 最基本的赋值运算符是“”。它表示将右侧的值赋给左侧的变量。例如&#xff0c;x 5意味着将值5赋给变量x。 增量赋值运算符&#xff1a; 这是一组在赋值的同时对变量进行递增操作的运算符。常见的有、-、*、/等。例如&…

THM学习笔记——网络工具

ping 当我们想要测试是否可以连接到远程资源时&#xff0c;会使用 ping 命令。 ping 的基本语法&#xff1a; ping <target>。 测试是否可以与百度建立网络连接&#xff1a; traceroute 互联网由许多个不同的服务器和端点组成&#xff0c;它们都相互联网。这意味着&a…

C++(1) 命名空间

文章目录 C1. C 概述2.C 相对于 C 语言的增强2.1C 第一行代码2.2 C 补充 bool 类型2.3 作用域运算符2.4 命名空间 namespace2.4.1 命名空间基本内容和开放性2.4.2 多个命名空间操作2.4.3 命名空间函数定义和实现分离2.4.4 匿名命名空间2.4.5 命名空间别名 C 1. C 概述 C 之父…

写立扣mysql题目收获

练习大纲&#xff1a; 立扣上的sql语句题 学习中的易错点和有趣的题目 总结了下常用的关键词和技巧 SELECT: 用于选择要检索的列。FROM: 用于指定要查询的表。WHERE: 用于过滤行&#xff0c;只返回满足条件的行。GROUP BY: 用于将结果集按一列或多列分组。HAVING: 与GROUP …

《剑指 Offer》专项突破版 - 面试题 29 : 排序的循环链表(C++ 实现)

题目链接&#xff1a;LCR 029. 循环有序列表的插入 - 力扣&#xff08;LeetCode&#xff09; 题目&#xff1a; 在一个循环链表中节点的值非递减排序&#xff0c;请设计一个算法在该循环链表中插入节点&#xff0c;并保证插入节点之后的循环链表仍然是排序的。 分析&#xf…

Java集合(List集合)

什么是集合&#xff1f; 什么是集合&#xff1f;集合就是“由若干个确定的元素所构成的整体”&#xff0c;在程序中&#xff0c;一般代表保存 若干个元素&#xff08;数据&#xff09;的某种容器类。 在Java中&#xff0c;如果一个Java对象可以在内部持有&#xff08;保存&…

Windows无法访问github解决方案

方案一 步骤1&#xff1a; 进入 C:\Windows\System32\drivers\etc 路径下 步骤2&#xff1a; 复制 hosts文件到桌面 步骤3&#xff1a; 在复制好的文件最后加上 140.82.114.4 github.com 199.232.69.194 github.global.ssl.fastly.net步骤4&#xff1a; 将修改好的文件替换…

2d关键点可视化 coco转h36m人体关键点

目录 coco转h36m人体关键点 opencv 2d关键点可视化 coco转h36m人体关键点 mhformer中有 def h36m_coco_format(keypoints, scores):assert len(keypoints.shape) 4 and len(scores.shape) 3h36m_kpts []h36m_scores []valid_frames []for i in range(keypoints.shape[…

Soul CEO张璐团队布局AIGC领域,打造数智化社交新体验

作为互联网社交领域的领军企业,Soul App近日再次受到广泛关注,因其在生成式人工智能(AIGC)领域的前沿布局和创新。随着数据积累、算力提升和算法不断迭代,AIGC技术正逐渐成为推动产业创新的重要工具之一。2023年被誉为AIGC元年,而Soul App在CEO张璐的带领下,在这个领域的不懈努…

计算CNN卷积层和全连接层的参数量

计算CNN卷积层和全连接层的参数量 先前阅读 CNN ExplainerA Comprehensive Guide to Convolutional Neural Networks — the ELI5 way 本文主旨意在搞明白2个问题&#xff1a; 第一个问题 一个卷积操作&#xff0c;他的参数&#xff0c;也就是我们要训练的参数&#xff0c;也…

快速添加Android seLinux权限

selinux 权限问题中90%的场景都是在补足缺少的权限&#xff0c;下面的通用方法主要用来解决我们在日志中获取到 avc denied 的问题&#xff1a; 首先获取avc的打印信息&#xff0c;可以通过 logcat | grep avc 获取&#xff0c;假设有如下日志&#xff1a; type1400 audit(0.…

常见逻辑漏洞

挖掘重点&#xff1a; 业务流程和HTTP/HTTPS请求篡改 支付漏洞和越权漏洞是金融业务中常见的 支付漏洞 (1) 密码重置 验证码直接在HTTP响应中返回&#xff1b; 验证码未绑定用户&#xff0c;没和手机号和邮箱号做匹配验证&#xff1b; 未校验用户字段值&#xff0c;改自…

Navigation 2 学习01 介绍及安装及运行示例

Navigation 2 是什么 Nav2 是 ROS 导航 的综合控制服务&#xff0c;类似人类的小脑控制人类的行走及身体平衡&#xff0c;Nav2 针对移动和地面机器人提供支持的自动驾驶车辆的相同类型的技术&#xff0c;经过优化和改造。该项目旨在找到一种安全的方法&#xff0c;使移动机器人…