vue3 el-form中嵌套el-tabale 对输入动态校验

news2024/12/22 7:20:56

在这里插入图片描述

简单案例

<el-form :model="Form" :rules="rules" ref="FormRef" class="formDiv">
  <el-table :data="Form.copyWriters" style="width: 100%">
        <el-table-column label="文案链接">
          <template #default="{ row, $index }">
            <el-form-item class="centered-input" :prop="'copyWriters.' + $index + '.url'" :rules="rules.url">
              <el-input v-model.trim="row.url" placeholder="请输入文案链接"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
   </el-table>
</el-form>


const Form = ref({
  copyWriters: [
    { name: 'John', url: '', isShow: true },
    { name: 'Smith', url: '', isShow: false },
  ],
})

const rules = ref({
  url: [
    {
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    {
      validator: validatePass,
      trigger: ['blur', 'change'],
    },
  ],
})

const validatePass = (rule, value, callback) => {
  const regExp = /^(http|https):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?$/
  if (regExp.test(value)) {
    callback() // 校验通过
  } else {
    callback(new Error('请输入正确的链接格式')) // 校验不通过,返回错误信息
  }
}

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

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

相关文章

TPU浅谈

前言 大家好&#xff0c;我是jiantaoyab&#xff0c;上篇文章讲了FPGA和ASIC&#xff0c;讲解了 FPGA 如何实现通过“软件”来控制“硬件”&#xff0c;以及我们可以进一步把 FPGA 设计出来的电路变成一块 ASIC 芯片。今天我们来看看TPU。大家可以点击这篇文章TPU深入了解TPU。…

BUUCTF-----[CISCN 2019 初赛]Love Math

<?php error_reporting(0); //听说你很喜欢数学&#xff0c;不知道你是否爱它胜过爱flag if(!isset($_GET[c])){show_source(__FILE__); }else{//例子 c20-1$content $_GET[c];if (strlen($content) > 80) {die("太长了不会算");}$blacklist [ , \t, \r, \n…

如何在webapp中手动部署

前言&#xff1a;这个有不知道怎么下载Tomcat的可以看我这篇博客的前面&#xff0c;有相关链接&#xff0c;下载好后我那边也有如何运行成功的 在idea中配置tomcat服务器&#xff0c;部署一个项目-CSDN博客 接下来进入这篇博客的正题&#xff01;怎么手动部署 先找到我们下载…

基于SpringBoot+Vue的个人云盘管理系统的设计与实现(源码+部署说明+演示视频+源码介绍)

您好&#xff0c;我是码农飞哥&#xff08;wei158556&#xff09;&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通…

AI预测福彩3D第11弹【2024年3月17日预测--新算法重新开始计算第8次测试】

今天继续对第一套算法进行测试。废话不多说了&#xff0c;直接上分析出的图表&#xff0c;再上结果。 最终&#xff0c;经过研判分析&#xff0c;2024年3月17日福彩3D的七码预测结果如下&#xff1a; 百位&#xff1a;4 5 3 8 6 2 9 十位&#xff1a;9 8 7 6 2 4 5 个位&#x…

三次握手seq和ack的流程 TCP协议栈seq和ack深层理解

☆ 大家可以把想了解的问题在评论发给我?我会根据问题补充到后面 ☆ 三次握手seq和ack的流程 是的,在TCP/IP协议中,三次握手过程确实涉及到序列号(Sequence Number, 简称Seq)和确认号(Acknowledgment Number, 简称Ack)的交换。这个过程是为了建立可靠的连接,确保数据能…

Vue3-响应式基础:单文件和组合式文件

单文件&#xff1a;html <!DOCTYPE html> <html> <head><title>响应式基础</title> </head> <body><div id"app" ><!-- dynamic parameter:同样在指令参数上也可以使用一个 JavaScript 表达式&#xff0c;需要包…

基于深度学习的唇语识别系统的设计与实现

概要 人工智能作为三大工程之一&#xff0c;从上个世纪至今仍然活跃于各个行业的研究与应用之中&#xff0c;应时代的热潮方向&#xff0c;本 课题主要针对深度学习技术应用于唇语识别当中&#xff0c;实现词语唇语的翻译功能。唇语识别在图像处理中一直是一个富 有挑战性的课题…

记一些有关Element Plus的样式修改

先记一个放着&#xff0c;后续慢慢补充。。。 一个 Vue 3 UI 框架 | Element Plus Radio 单选框 1、去除radio的圆圈 .box-radio {/deep/ .el-radio__input {display: none;} }

如何使用ArcGIS Pro生成带计曲线等高线

等高线作为常见的地图要素经常会被使用到&#xff0c;一般情况下生成的等高线是不带计曲线的&#xff0c;在某些情况下我们需要带计曲线的等高线&#xff0c;这里为大家介绍一下ArcGIS Pro生成带计曲线等高线的方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数…

wireshark解析https数据包

Debian11环境&#xff1a; 在linux环境下抓取访问某个https的网址时抓取的数据包都是加密的&#xff0c;导致无法跟踪到数据包流&#xff0c;现在尝试将抓取的https包进行解密。 1、解密https数据包需要设置SSLKEYLOGFILE变量&#xff0c;推荐写入配置文件中。 echo "exp…

1.实用Qt:解决绘制圆角边框时,圆角锯齿问题

目录 问题描述 解决方案 方案1&#xff1a; 方案2&#xff1a; 结果示意图 问题描述 做UI的时候&#xff0c;我们很多时候需要给绘制一个圆角边框&#xff0c;初识Qt绘制的童鞋&#xff0c;可能绘制出来的圆角边框很是锯齿&#xff0c;而且粗细不均匀&#xff0c;如下图&…

跨域问题?无需担心!学习如何解决 Axios 的跨域限制

跨域是指访问另外一个域的资源&#xff0c;由于浏览器的同源策略&#xff0c;默认情况下使用 XMLHttpRequest 和 Fetch 请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略&#xff0c;这是由浏览器对 JavaScript 施加的安全限制。 Axios 跨域常见报错 跨域请求被阻止 (…

封装哈希表

本文旨在讲解哈希表的封装&#xff0c;我们以哈希桶的结构来进行封装unorderedmap/set。要想实现封装哈希表&#xff0c;我们首先得先将哈希表的结构给搭建出来&#xff0c;然后再根据哈希桶的结构进一步封装unorderedmap/set&#xff01; 下面我们先来实现哈希桶的结构&#x…

【C#】【SAP2000】SAP2000中批量修改指定荷载工况下所有Frame对象的温度荷载

if (build true){// 连接到正在运行的 SAP2000cOAPI mySapObject (cOAPI) System.Runtime.InteropServices.Marshal.GetActiveObject("CSI.SAP2000.API.SapObject");cSapModel mySapModel mySapObject.SapModel;// 获取所有框架单元的总数int numberFrames 0;str…

动态航线图

申请百度地图密钥 注意&#xff1a;随着版本的变化 &#xff0c;申请百度地图密钥的界面和方式可能会发生变化&#xff0c;这里的步骤仅供参考。 注册百度账号 注册后&#xff0c;使用账号进行登录。 申请百度地图密钥 打开http://lbsyun.baidu.com&#xff0c;依次点击“控…

PostgreSQL开发与实战(6.3)体系结构3

作者&#xff1a;太阳 四、物理结构 4.1 软件安装目录 bin //二进制可执行文件 include //头文件目录 lib //动态库文件 share //文档以及配置模版文件4.2 数据目录 4.2.1 参数文件 pg_hba.conf //认证配置文件 p…

小蓝的漆房——算法思路

题目链接&#xff1a;1.小蓝的漆房 - 蓝桥云课 (lanqiao.cn) 本题只要是通过枚举的方法&#xff0c;算出涂成每一种颜色所需的天数&#xff0c;最后在所有天数中找出最小值&#xff08;由题可知&#xff0c;最多只有60种颜色&#xff0c;所以可以尝试算出每种颜色所需的时间&am…

产品推荐 - 基于FPGA XC7K325T+DSP TMS320C6678的双目交汇视觉图像处理平台

一、产品概述 TES601是一款基于FPGA与DSP协同处理架构的双目交汇视觉图像处理系统平台&#xff0c;该平台采用1片TI的KeyStone系列多核浮点/定点DSP TMS320C6678作为核心处理单元&#xff0c;来完成视觉图像处理算法&#xff0c;采用1片Xilinx的Kintex-7系列FPGA XC7K325T作为视…

PCM和I2S区别

I2S和PCM接口都是数字音频接口&#xff0c;而所见的蓝牙到cpu以及codec的音频接口都是用PCM接口&#xff0c;是不是两个接口有各自不同的应用呢&#xff1f;先来看下概念。 PCM&#xff08;PCM-clock、PCM-sync、PCM-in、PCM-out&#xff09;脉冲编码调制&#xff0c;模拟语音信…