vue2+element-ui新增编辑表格+删除行

news2024/11/23 12:31:27

实现效果:

 

代码实现 :

          <el-table :data="dataForm.updateData"
                    border
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}">
            <el-table-column label="选项字段"
                             align="center"
                             prop="name">
              <template slot-scope="scope">
                <el-form-item :prop="'updateData.' + scope.$index + '.formName'"
                              :rules="[
                                { required: true, message: '请输入', trigger: 'blur' },
                                { min: 1, max: 20, message: '长度在1到 20个字符', trigger: 'blur' }
                              ]">
                  <el-input v-model="scope.row.formName"
                            clearable></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
                             label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="addRow(scope.$index,scope.row,dataForm.updateData)"
                           type="text"
                           size="small">
                  新增
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index,scope.row,dataForm.updateData)"
                           type="text"
                           size="small"
                           v-if="dataForm.updateData.length!=1">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

<script>
export default {
      data () {
        return {
            dataForm: {
                // 自定义字段
                updateData: [
                  {
                    // id: '',
                    formName: ''
                  }
                ]
                // 其他...    
            }
        }
      },
      methods: {
    // addRow 新增 自定义字段表格行
    addRow (index, rows, item) {
      // console.log(index, rows, item)
      // this.dataForm.updateData.push({
      //   // sort: this.dataForm.updateData && this.dataForm.updateData.length > 0 ? this.dataForm.updateData.length + 1 : 1,
      //   id: null,
      //   formName: ''
      // })
      // 数组中添加新元素
      item.splice(index + 1, 0, { formName: '' })
    },
    // deleteRow 删除 自定义字段表格行
    deleteRow (index, rows, item) {
      // console.log(index, '当前行索引', rows, '删除的目标行')
      // 从index这个位置开始删除数组后的1个元素
      item.splice(index, 1)
      // this.$confirm('删除当前行, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   item.splice(index, 1)
      //   // this.delArrId.push(rows.id) // 被删除的id数组集合
      //   // rows.isDelete = 1
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },
      }
}
</script>

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

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

相关文章

【全网最全流程+所有代码】企业微信回调联调,开通企微回调和收到企微回调

流程图: 只是这里的消息回调,仅作为提示,群内有消息了。不是具体的消息,而是类似这样的结构,: 如果需要获取消息,还需要拉取企微群内消息方法,这个后续再更新。 好了,我们开始吧。 开启消息回调和接收消息回调,地址是一样的,只是 开启消息回调,get请求, 接受消…

【图像分割】mask2former:通用的图像分割模型详解

最近看到几个项目都用mask2former做图像分割&#xff0c;虽然是1年前的论文&#xff0c;但是其attention的设计还是很有借鉴意义&#xff0c;同时&#xff0c;mask2former参考了detr的query设计&#xff0c;实现了语义和实例分割任务的统一。 1.背景 1.1 detr简介 detr算是第…

Build a Large Language Model (From Scratch)附录A(gpt-4o翻译版)

来源&#xff1a;https://github.com/rasbt/LLMs-from-scratch?tabreadme-ov-file https://www.manning.com/books/build-a-large-language-model-from-scratch

GBU2510-ASEMI储能专用整流桥GBU2510

编辑&#xff1a;ll GBU2510-ASEMI储能专用整流桥GBU2510 型号&#xff1a;GBU2510 品牌&#xff1a;ASEMI 封装&#xff1a;GBU-4 正向电流&#xff08;Id&#xff09;&#xff1a;25A 反向耐压&#xff08;VRRM&#xff09;&#xff1a;1000V 正向浪涌电流&#xff1a…

conda中创建环境并安装tensorflow1版本

conda中创建环境并安装tensorflow1版本 一、背景二、命令三、验证一下 一、背景 最近需要使用tensorflow1版本的&#xff0c;发个记录&#xff01; 二、命令 conda create -n tf python3.6 #创建tensorflow虚拟环境 activate tf #激活环境&#xff0c;每次使用的时候都…

软考(高项)系统分析师--论文写作技巧

文章目录 前言一、论文的结构和要求&#xff1a;1.1 论文的结构&#xff1a;1.2 论文的要求&#xff1a; 二、论文每段的写法&#xff1a;2.1 解题&#xff1a;2.2 摘要&#xff1a;2.2.1 第一段&#xff1a;2.2.2 第二段&#xff1a; 2.3 正文&#xff1a;2.3.1 项目背景&…

如何选择快手矩阵系统:打造高效短视频营销的指南

快手作为中国领先的短视频社交平台&#xff0c;为内容创作者和品牌提供了广阔的展示舞台。为了更高效地管理和扩展在快手上的影响力&#xff0c;快手矩阵系统成为了一个重要的工具。本文将指导您如何选择一个合适的快手矩阵系统&#xff0c;以优化您的内容管理和营销策略。 快…

【Android】构建 Android Automotive OS:适合初学者的指南

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

html高级篇

1.2D转换 转换&#xff08;transform&#xff09;你可以简单理解为变形 移动&#xff1a;translate 旋转&#xff1a;rotate 缩放&#xff1a;sCale 移动&#xff1a;translate 1.移动具体值 /* 移动盒子的位置&#xff1a; 定位 盒子的外边距 2d转换移动 */div {width…

CIDEr(Consensus-based Image Description Evaluation)的计算

CIDEr&#xff08;Consensus-based Image Description Evaluation&#xff09; 论文原文 CIDEr: Consensus-based Image Description Evaluation CIDEr&#xff08;Consensus-based Image Description Evaluation&#xff09;是一种用于自动评估图像描述&#xff08;image ca…

吴恩达深度学习笔记:机器学习策略(2)(ML Strategy (2)) 2.3-2.4

目录 第三门课 结构化机器学习项目&#xff08;Structuring Machine Learning Projects&#xff09;第二周&#xff1a;机器学习策略&#xff08;2&#xff09;(ML Strategy (2))2.3 快速搭建你的第一个系统&#xff0c;并进行迭代&#xff08;Build your first system quickly…

师从IEEE fellow|博士后加拿大阿尔伯塔大学成行

V老师指定申请加拿大&#xff0c;优先对方出资的博士后&#xff0c;如果外方无资助&#xff0c;也可以自筹经费&#xff0c;但要求必须是博士后头衔。最终我们为其落实了加拿大阿尔伯塔大学的postdoctoral fellow&#xff08;博士后研究员&#xff09;&#xff0c;尽管是无薪职…

三菱plc gxwork3 0X121201F 报错;三菱标签区域的保留容量不足;

如果占用过多把r文件寄存器的地址范围改小&#xff0c;一般文件寄存器的地址r0-8000足够了

腾讯课堂即将停止服务?来试试这款开源的知识付费系统

项目介绍 本系统基于ThinkPhp5.0layuiVue开发,功能包含在线直播、付费视频、付费音频、付费阅读、会员系统、分销系统、拼团活动、直播带货、直播打赏、商城系统等。能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、吸引流量、网络营销、品牌推广的一款应用&…

2024 世界人工智能大会暨人工智能全球治理高级别会议全体会议在上海举办,推动智能向善造福全人类

2024 年 7 月 4 日&#xff0c;2024 世界人工智能大会暨人工智能全球治理高级别会议-全体会议在上海世博中心举办。联合国以及各国政府代表、专业国际组织代表&#xff0c;全球知名专家、企业家、投资家 1000 余人参加了本次会议&#xff0c;围绕“以共商促共享&#xff0c;以善…

微软发布了Win11 24H2版本的首个设置动态更新和恢复!

系统之家于7月3日发出最新报道&#xff0c;微软针对Win11 24H2版本发布了首个设置动态更新(Setup Dynamic Update)KB5039448。此次更新主要改进了Win11 24H2的安装文件以及用户在升级、安装到24H2版本过程中可能会使用到的所有文件。 系统之家附上 Windows 11 24H2 的完整发布时…

mac视频压缩简单办法,mac如何把视频压缩到指定大小内存

在数字时代&#xff0c;视频已成为我们日常生活和工作的重要交流工具。然而&#xff0c;视频文件体积庞大&#xff0c;给存储和分享带来了不少困扰。本文将为你揭秘视频压缩的秘密&#xff0c;让你轻松减小视频文件体积&#xff0c;提升分享效率&#xff01; 方法一下载文件压缩…

PLC工作原理

PLC&#xff08;可编程逻辑控制器&#xff09;的工作原理简述为&#xff1a;集中采样、集中输出、周期性循环扫描。 西门子PLC 一、集中采样 顺序读取所有输入端子的通断状态&#xff0c;并将所读取的信息存到输入映像寄存器中&#xff0c;此时输入映像寄存器被刷新&#xff…

Pylons 和 Flex 3

“Pylons” 和 “Flex 3” 是两个不同的技术&#xff0c;各自有着不同的背景和应用场景&#xff1a; Pylons Pylons 是一个 Python Web 框架&#xff0c;用于快速开发 Web 应用程序。它强调简单性、灵活性和可扩展性&#xff0c;以便开发人员能够快速构建和部署功能强大的 We…