vue2实践:el-table实现由用户自己添加删除行数的动态表格

news2024/11/13 4:10:03

需求

项目中需要提供一个动态表单,如图:

当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。

至少要有一行数据,但是没有上限。

24052270805141a1baaebbae5a9bdda9.png

思路

这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是:

1、table里面的每一个cell,需要放置一个input来支持用户编辑。

2、最后一列放置两个button,响应用户添加或删除行的需求

实现

data

managerList:[{
   userId:undefined,
   nickName:undefined,
   phonenumber:undefined
}],

template 

因为要求至少有一行数据,所以删除按钮增加一个判断,v-if="managerList.length > 1",当只剩一行数据时,删除按钮隐藏,不允许再点击

<el-table :data="managerList">        
        <el-table-column label="姓名" align="center" prop="nickName">
          <template slot-scope="scope">
            <el-input v-model.trim="scope.row.nickName" placeholder="请输入项目经理姓名"/>
          </template>
        </el-table-column>
        <el-table-column label="电话号码" align="center" prop="phonenumber">
          <template slot-scope="scope">
            <el-input v-model.trim="scope.row.phonenumber" placeholder="请输入电话号码"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="status">
          <template slot-scope="scope">
            <el-link type="primary" icon="el-icon-plus" :underline="false" @click="addRow">新增</el-link>
            <el-link type="primary" icon="el-icon-delete-solid" :underline="false" @click="deleteRow(scope.$index,scope.row)"
                     v-if="managerList.length > 1">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

methods

input不需要特殊处理。但是两个按钮要响应用户操作:

新增

当点击新增时,希望增加一行。基于Vue的响应式原理,data中的managerList数组增加一项即可,使用managerList.push;

addRow(){
      let manager = {
        userId:undefined,
        nickName: undefined,
        phonenumber: undefined
      };
      this.managerList.push(manager);
},

删除

当点击删除时,希望减少一行,同理,managerList中该行数据删除:

deleteRow(index,row){
      this.managerList.splice(index, 1);
},

如果这里全部都是新增数据,这样就可以了,但是,如果其中有初始数据,而删除的数据又是初始数据的话,需要记录哪个数据要被删除,以便保存时进行真正的数据删除

deleteRow(index,row){
      this.managerList.splice(index, 1);

      //获取被删除的用户id,以便保存时将账户状态置为禁用
      if(row.userId != "" && row.userId != undefined){
        this.delUsers.push(row);
      }
},

数据校验

validateInput(){
      for (let i = 0; i < this.managerList.length; i++) {
        this.managerList[i].nickName = this.managerList[i].nickName.trim();
        if (this.managerList[i].nickName === undefined || this.managerList[i].nickName === ""
          || this.managerList[i].nickName === null
          || this.managerList[i].phonenumber === undefined || this.managerList[i].phonenumber === "" ||
          this.managerList[i].phonenumber === null) {
          this.msgError(`第 ${i + 1} 项姓名或手机号码不能为空`);
          return false;
        }
        const regex = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
        if (!regex.test(this.managerList[i].phonenumber)) {
          this.msgError(`第 ${i + 1} 项电话号码格式错误`);
          return false;
        }
        //判断重复项
        for (let j = 0; j < i; j++) {
          if (this.managerList[j].nickName === this.managerList[i].nickName &&
            this.managerList[j].phonenumber === this.managerList[i].phonenumber) {
            this.msgError(`第 ${i + 1} 项"${this.managerList[i].nickName}"重复添加`);
            return false;
          }
        }
      }
      return true;
    },

保存

submitManagerList(){
      if(this.validateInput()){
        this.removeManagers();
        this.addOrUpdateManagers();        
      }
},

至此,可以由用户自己控制行数的动态表格就完成了。

 

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

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

相关文章

校园水电费管理|基于java的校园水电费管理小程序系统 (源码+数据库+文档)

校园水电费管理 目录 基于java的校园水电费管理小程序系统 一、前言 二、系统设计 三、系统功能设计 小程序端 后台功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕…

Selenium使用浏览器用户配置进行测试

本文主要介绍了如何在使用Selenium WebDriver进行自动化测试时&#xff0c;创建和使用自定义的Firefox配置文件。 什么是Firefox配置文件&#xff1f; Firefox会将用户的个人信息&#xff0c;如书签、密码和用户偏好设置存储在一个称为配置文件的文件集合中&#xff0c;这些文…

C++设计模式——Iterator迭代器模式

一&#xff0c;迭代器模式的定义 迭代器模式是一种行为型设计模式&#xff0c;它使得遍历一个容器对象中的元素变得更加简单。 迭代器模式将遍历操作从容器对象&#xff08;如集合、列表&#xff09;中分离出来&#xff0c;它通过迭代器对象来遍历容器对象中的元素&#xff0…

若依后端正常启动但是uniapp移动端提示后端接口异常

pc端能用模拟器也能正常连接接口&#xff0c;手机端真机调试连不上接口 解决&#xff1a; 1. 先看config.js的 填自己的ip地址 module.exports { // baseUrl: https://vue.ruoyi.vip/prod-api, baseUrl: "http://192.168.101.5:8080", } 2.网络环境问题&#…

mysql -小计

//表单某字段值为当前打开文档Id (function () { var rdoc getRelateDocument(); var warehouseName rdoc.getItemValueAsString(“warehouseName”); var name rdoc.getItemValueAsString(“name”); var color rdoc.getItemValueAsString(“color”); var batchNumber r…

2024年Web前端JavaScript面试题整理附答案

&#xff08;1&#xff09;两等号判等&#xff0c;会在比较时进行类型转换&#xff1b; &#xff08;2&#xff09;三等号判等(判断严格)&#xff0c;比较时不进行隐式类型转换&#xff0c;(类 型不同则会返回false)&#xff1b; &#xff08;3&#xff09;Object.is 在三等号…

基于风力发电系统的开关磁阻Simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于风力发电系统的开关磁阻Simulink建模与仿真&#xff0c;开关磁阻风力发电系统&#xff08;Switched Reluctance Wind Power Generation System&#xff09;利用开关磁阻电…

计算机的错误计算(八十九)

摘要 探讨反双曲余切函数 acoth(x) 在 附近的计算精度问题。 Acoth(x) 函数的定义为&#xff1a; 其中 x 的绝对值大于 1 . 例1. 计算 acoth(1.000000000002) . 不妨在 Excel 的单元格中计算&#xff0c;则有&#xff1a; 若在Python中用定义直接计算&#xff0c;则有几乎…

SpringCloud神领物流学习笔记:项目概述(一)

SpringCloud神领物流学习笔记&#xff1a;项目概述&#xff08;一&#xff09; 文章目录 SpringCloud神领物流学习笔记&#xff1a;项目概述&#xff08;一&#xff09;1、项目介绍2、基本业务流程3、系统架构4、技术架构 1、项目介绍 ​ 神领物流是一个基于微服务架构体系的【…

Visual Studio 在 .NET MAUI 安装期间无法安装 OpenJDK v8 - 访问被拒绝

优质博文&#xff1a;IT-BLOG-CN 问题 我一直在 Windows 计算机上设置 Visual Studio 以进行 .NET MAUI 开发&#xff0c;但在设置过程中一直遇到问题。具体问题涉及 OpenJDK v8 无法安装。这是我看到的情况&#xff1a; Couldnt install OpenJDKv8我尝试过几种方法来解决这…

金融工程--论文资料整理方法

背景 1、金融工程的主要参考文献来源&#xff0c;帮助了解最新的量化研究进展。 2、这个工作其实对于所有的工程领域都能够使用。 3、如何使用ai工具提升阅读效率&#xff1f; 期刊文献来源 文献来源 https://zhuanlan.zhihu.com/p/549070754 这个网站能够很好帮助找到相关…

Linux(Ubuntu和CentOS通用)系统下源码安装Nginx_ubuntu和centos软件通用吗

<1>进入/home/zhangbao/nginx_install目录&#xff1a;cd /home/zhangbao/nginx_install <2>解压openssl-fips-2.0.16.tar.gz文件&#xff1a;tar -zxvf openssl-fips-2.0.16.tar.gz <3>进入openssl-fips-2.0.16解压包中&#xff1a;cd openssl-fips-2.0.16 …

什么是Aware注入?

Spring容器可以在Bean初始化的时候&#xff0c;自动注入一些特定信息&#xff08;如beanfactory&#xff09;,使得bean可以轻松的访问其他Bean的实例&#xff0c;简化代码&#xff0c;避免了显式的注入。 Spring提供了很多Aware的接口,如下&#xff1a; 拿其中的BeanFactoryAwa…

SprinBoot+Vue健身俱乐部网站系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质…

编曲术语:各种段落的英文表示 Cubasis和Cubase联合编曲

在编曲中&#xff0c;常见的段落英文表示如下&#xff1a; 前奏&#xff08;Intro&#xff09;&#xff1a;通常是歌曲开头的部分&#xff0c;用于引入主题&#xff0c;营造氛围。 主歌&#xff08;Verse&#xff09;&#xff1a;歌曲的主要叙述部分&#xff0c;一般有多段&am…

Vue实现自定义进度条占比功能 Vue自定义进度条功能

在不使用echarts等第三方插件的情况下,使用Vue实现自定义的进度条占比功能,并且是多数据可选循环的 预览图效果 首先看一下获取的后端返回的数据结构,其中每一组加起来等于 22 ,也就是说如果你自己算的话也是同理,根据 占比的数值 除以 总和 =的百分比再去渲染对应占比…

828华为云征文 | 标题:使用华为云X实例部署图数据库Virtuoso并存储6500万条大数据的完整过程与性能测评

前言 在大数据时代&#xff0c;图数据库以其强大的关系处理能力在复杂网络、社交媒体分析、知识图谱等领域得到了广泛应用。而在云计算的蓬勃发展下&#xff0c;使用云服务器进行图数据库的部署与管理变得更加方便高效。本篇文章将详细介绍如何在华为云X实例上部署开源图数据…

C++(2)之Linux多线程服务端编程总结

C之Linux多线程服务端编程读书笔记 Author: Once Day Date: 2023年1月31日/2024年8月23日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: Linux实践…

MySQL-CRUD入门2

文章目录 数据的查询(补充)条件查询关于SQL语句的执行顺序分页查询(LIMIT) 数据的修改数据修改基础知识 数据的查询(补充) 这一节接着写, 包括数据的查询(补充), 数据的更新, 数据的删除 条件查询 其实就是根据给定的一些条件, 然后过滤掉不符合实际情况的记录, 把符合条件的…

Spring Cloud之二 微服务注册

1&#xff1a;Intellij 新建服务 user-service 2&#xff1a;pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"…