el-table 插入输入框并进行校验

news2024/11/19 1:20:42

<template>
  <div>
    <el-form :model="list" ref="ruleForm">
      <el-table :data="list.tableData" style="width: 100%">
        <el-table-column prop="time" label="日期" width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.time'" :rules="rules.time">
              <el-input v-model="scope.row.time" maxlength="200" oninput="if(value.length > 4) value=value.slice(0, 4)" placeholder="请输入">
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="rules.time">
              <el-input v-model="scope.row.name" maxlength="200" oninput="if(value.length > 4) value=value.slice(0, 4)" placeholder="请输入">
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: {
        tableData: [
          {
            time: '2016-05-02',
            name: '王小虎'
          },
          {
            time: '2016-05-03',
            name: '王小虎3'
          }
        ]
      },
      rules: {
        time: [
          { required: true, message: '请输入', trigger: 'blur' },
        ]
      }
    }
  }
}
</script>

<style>
</style>

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

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

相关文章

Swagger修改Api文档中的数据类型

swagger不陌生,API接口利器,本次要解决的问题是:我们知道前端在接收Long类型的属性时会出现精度问题,一般我们会在序列化的时候将Long类型的数字转换成String但是swagger的API文档中的类型还是Long,我们要解决的就是这个问题 不知道swagger怎么配置得可以看之前的文章:springb…

matlab阶段学习笔记小节2

syms定义符号变量 求极限 第二题 第三题 limit(y,n,inf);求的的函数y关于自变量n在无穷处&#xff08;inf&#xff09;的极限 exp(2)即指数为2&#xff0c;底为e,也就是e^2 求导数 第一题 log(x)默认是以e为底的指数函数&#xff0c;也就是ln(x). 使用diff(f)对函数进行求…

工作纪实46-关于微服务的上线发布姿势

蓝绿部署 在部署时&#xff0c;不需要将旧版本的服务停掉&#xff0c;而是将新版本与旧版本同时运行&#xff0c;新版本测试无误之后再将旧版本停掉。这样可以避免再升级的过程中如果失败服务不可用的问题&#xff0c;因为同时部署了两个版本的程序&#xff0c;使得硬件资源是…

Xshell 连接 虚拟机

一、网络配置 1. 虚拟网络编辑器 2. 打开本机的网络适配器选项 检查 3. 修改虚拟机的网段 vim /etc/sysconfig/network-scripts/ifcfg-ens33 按键盘 i 进行修改 键盘右上角Esc退出&#xff0c;然后输入 &#xff1a;wq 保存&#xff0c;然后重启网卡 systemctl restart netwo…

Oracle Essbase 多维库导入文件数据步骤操作

第一步&#xff1a; 先确定导入数据的维度数量&#xff08;清楚自己需要导入什么数据和范围&#xff09; 第二步&#xff1a; 设置加载的规则 1.创建规则 2.编辑规则-》打开数据文件 通过数据文件来确定加载规则的加载格式 先查看数据文件格式&#xff1a; 将数据文件导入&…

javase day02笔记

第二天课堂笔记 源文件的组成部分★★ 源文件外部结构 class 类名{}main方法 public static void main(String [] args){}main方法可有可无 没有main的情况&#xff0c;编译成功&#xff0c;运行失败&#xff0c;没有程序入口 多个main情况&#xff0c;编译报错&#xff0c;…

编曲学习:钢琴编写 人性化、逻辑预制 工程音频导出

第8课 钢琴编写 人性化、逻辑预制 工程音频导出小鹅通-专注内容付费的技术服务商https://app8epdhy0u9502.pc.xiaoe-tech.com/live_pc/l_65e30339e4b064a8cfe56001?course_id=course_2XLKtQnQx9GrQHac7OPmHD9tqbv 音乐创作中,有思路时可以不套学习到的公式,没有思路时可以套…

软件测试相关内容第三弹--软件测试基础

写在前&#xff1a;在前篇的两篇博客介绍中我们主要学习软件测试的相关概念&#xff0c;对软件测试进行了初步的了解&#xff0c;本篇博客将进一步进行学习。重点内容包括&#xff1a;软件测试的生命周期、如何描述一个bug、如何定义bug的级别、bug的生命周期以及在实际工作中如…

C语言:ctype和string库中的部分常用函数的应用和实现

在编程过程中&#xff0c;我们经常要处理字符和字符串&#xff0c;C语言标准库中就提供了一系列的库函数&#xff0c;便于我们操作库函数。 字符分类函数 C语⾔中有⼀系列的函数是专⻔做字符分类的&#xff0c;也就是⼀个字符是属于什么类型的字符的。这些函数的使⽤都需要包含…

蓝桥杯递推与递归法|斐波那契数列|数字三角形|42点问题|数的计算|数的划分(C++)

递归是用来做dfs&#xff0c;是搜索算法的基础 递推是用来做dp部分&#xff0c;及部分其他算法&#xff0c;复杂度较低&#xff0c;不会出现爆栈问题递推法&#xff1a; 递推法是一种在数学和其他领域广泛应用的重要方法&#xff0c;它在计算机科学中被用作一种关键的数值求解…

【深度学习笔记】6_10 双向循环神经网络bi-rnn

注&#xff1a;本文为《动手学深度学习》开源内容&#xff0c;部分标注了个人理解&#xff0c;仅为个人学习记录&#xff0c;无抄袭搬运意图 6.10 双向循环神经网络 之前介绍的循环神经网络模型都是假设当前时间步是由前面的较早时间步的序列决定的&#xff0c;因此它们都将信…

Java宝典-抽象类和接口

目录 1. 抽象类1.1 抽象类的概念1.2 抽象类的语法1.3 抽象类的特点 2. 接口2.1 接口的概念2.2 接口的语法2.3 接口的特点2.4 实现多个接口2.5 接口的继承 3. 接口使用案例 铁汁们好,今天我们学习抽象类和接口~ 1. 抽象类 1.1 抽象类的概念 什么是抽象类?在面向对象中,如果一…

cmaketool插件的自动扫描工作空间设置

点击左下角的齿轮&#xff0c;进入设置。 搜索cmake&#xff1a;config 将不需要的取消打钩即可

CCF-A推荐会议 安全界顶会ACM CCS‘24 4月29日第二轮投稿!共建更安全的数字世界!

会议之眼 快讯 第31届ACM CCS (ACM Conference on Computer and Communications Security)即计算机和通信安全会议将于 2024 年 10月14日-18日在美国盐湖城举行&#xff01;CCS是美国计算机协会(ACM)安全、审计与控制特别兴趣小组(SIGSAC)主办的一年一度的重要会议。是SIGSAC的…

Redisson学习

简介 Redisson 是一个在 Redis 的基础上实现的 Java 驻留内存数据网格&#xff08;In-Memory Data Grid&#xff09;。它提供了许多分布式 Java 对象和服务&#xff0c;包括分布式锁、分布式集合、分布式执行服务、分布式调度任务等。 使用 依赖 相关依赖&#xff0c;注意版…

【Attribute】Inspector视图可视不可编辑字段特性

简介 在Unity开发中&#xff0c;有时候我们存在这种需求&#xff0c;需要在Inspector视图中可以查看字段信息但是无法对字段进行赋值&#xff0c;那么我们也可以像Unity内置的[SerializeField]、[Tooltip]等特性那样自定义一个特性&#xff0c;用于满足这个需求。 代码示例(C#…

【备战蓝桥杯系列】蓝桥杯国二选手笔记二:算法模版笔记(Java)

感谢大家的点赞&#xff0c;关注&#xff0c;评论。准备蓝桥杯的同学可以关注一下本专栏哦&#xff0c;不定期更新蓝桥杯笔记以及经验分享。本人多次参加过蓝桥杯&#xff0c;并获得过蓝桥杯国二的成绩。 算法模版笔记&#xff08;Java&#xff09; 这篇文章给大家分享我的蓝桥…

【C++】二叉树进阶之二叉搜索树

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练掌握二叉搜索树&#xff0c;能自己模拟实现二…

每日一题-合成两个有序链表

&#x1f308;个人主页: 会编辑的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” 以上是题目信息&#xff1a; 下面是解答过程 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ typedef struct Lis…

【C#语言入门】17. 事件详解(上)

【C#语言入门】17. 事件详解&#xff08;上&#xff09; 一、初步了解事件 定义&#xff1a;单词Event&#xff0c;译为“事件” 通顺的解释就是**“能够发生的什么事情”**&#xff0c;例如&#xff0c;“苹果”不能发生&#xff0c;但是“公司上市”这件事能发生。在C#中事…