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

实现效果:

 

代码实现 :

          <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.mfbz.cn/a/771959.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

析构函数和拷贝构造函数

文章目录 析构函数1.析构函数的定义&#xff1a;2.析构函数的语法&#xff1a;3.析构函数的特性&#xff1a; 拷贝构造函数1.拷贝构造函数的定义&#xff1a;2.拷贝构造函数的语法3.拷贝构造函数的特性(1)拷贝构造函数是构造函数的一个重载形式**(这个其实也很好理解&#xff0…

黑马点评DAY4|整体项目介绍、短信登录模块

项目整体介绍 项目功能介绍 项目结构 该项目前后端分离架构模式&#xff0c;后端部署在Tomcat服务器&#xff0c;前端部署在Niginx服务器上&#xff0c;这也是现在企业开发的标准做法。PC端首先向Niginx发起请求&#xff0c;得到页面的静态资源&#xff0c;页面再通过ajax向服…

实现各平台确定性的物理碰撞

1.使用FixedUpdate而不是Update 1.物理运算&#xff0c;比如刚体运动系统的运算是通过固定的时间来驱动的。 2.再moba帧同步游戏中&#xff0c;15帧的固定调用差不多是网络那边的极限了&#xff0c;采用其他手段如平滑显示来提高画面的平滑度。 FixedUpdate是以一个固定的帧率…

Linux Shell 脚本入门教程:开启你的自动化之旅

目录 一、什么是Shell&#xff1f; 二、 编写第一个Shell脚本 ​编辑 2.2 变量 2.3 功能语句 2.4 数组 一、什么是Shell&#xff1f; Shell是一种计算机程序&#xff0c;它充当了用户与操作系统之间的接口。在Linux系统中&#xff0c;Shell允许用户通过命令行界面&#x…

Windows下cmd中cd命令不起作用的原因和解决办法

1. 问题 即便是输入了cd指令&#xff0c;但是并没有跳转。 2. 原因 实际上cmd换目录跨磁盘的话需要先进行磁盘的转换。 3. 解决办法 先执行 D:

闲鱼商品搜索关键词优化攻略

一、闲鱼商品详情关键词搜索概述 闲鱼作为国内最大的二手交易平台之一&#xff0c;其商品搜索功能对于买家和卖家来说至关重要。商品详情页中的关键词搜索功能&#xff0c;可以帮助买家更快速地找到心仪的商品&#xff0c;也可以帮助卖家提高商品的曝光度&#xff0c;从而促进…

工厂自动化相关设备工业一体机起到什么作用?

在当今的制造业领域&#xff0c;工厂自动化已成为提高生产效率、保证产品质量和降低成本的关键。在这一进程中&#xff0c;工业一体机作为一种重要的设备&#xff0c;发挥着不可或缺的作用。 工业一体机是自动化生产线上的控制中心。它能够整合和处理来自各个传感器、执行器和其…

【3分钟准备前端面试】vue3

目录 Vue3比vue2有什么优势vue3升级了哪些重要功能生命周期变化Options APIComposition APIreftoRef和toRefstoReftoRefsHooks (代码复用)Vue3 script setupsetupdefineProps和defineEmitsdefineExposeVue3比vue2有什么优势 性能更好体积更小更好的TS支持更好的代码组织更好的逻…

【开发笔记】如何用正则匹配出百度云盘分享链接的提取码和链接?

用Wordpress做下载站&#xff0c;需要复制网盘链接到后台的文章发布自定义字段&#xff0c;然后我不想每次手动拆分链接和提取码分别到两个input&#xff0c;就想在后台粘帖时候实现拆分它。 $link 链接&#xff1a;https://pan.baidu.com/s/16y9Z5mTSE6gewStGDNndNQ 提取码…

论文解读——如何生成高分辨率图像PGGAN

论文&#xff1a;Progressive Growing of GANs for Improved Quality, Stability, and Variation&#xff08;2017.10&#xff09; 作者&#xff1a;Tero Karras, Timo Aila, Samuli Laine, Jaakko Lehtinen 链接&#xff1a;https://arxiv.org/abs/1710.10196 代码&#xff1a…

将多个SQL查询合并的两种方式

说明&#xff1a;单个简单查询是非常容易的&#xff0c;但是为了避免多次访问访问数据库&#xff0c;我们会尽可能通过表关联将业务所需要的字段值一次性查出来。而有时候不太清楚表之间的关联关系&#xff08;这取决于对业务的熟悉程度&#xff09;&#xff0c;或者实际情况就…

【SSL 1823】消灭怪物(非传统BFS)

题目大意 小b现在玩一个极其无聊的游戏&#xff0c;它控制角色从基地出发&#xff0c;一路狂奔夺走了对方的水晶&#xff0c;可是正准备回城时&#xff0c;发现地图上已经生成了 n n n 个怪。 现在假设地图是二维平面&#xff0c;所有的怪和角色都认为是在这个二维平面的点上…

甲骨文首次将LLMs引入数据库,集成Llama 3和Mistral,和数据库高效对话

信息时代&#xff0c;数据为王。数据库作为数据存储&管理的一种方式&#xff0c;正在以势不可挡的趋势与AI结合。 前有OpenAI 收购了数据库初创公司 Rockset&#xff0c;引发广泛关注&#xff1b;Oracle公司&#xff08;甲骨文&#xff09;作为全球最大的信息管理软件及服…

基于 Windows Server 2019 部署域控服务器

文章目录 前言1. 域控服务器设计规划2. 安装部署域控服务器2.1. 添加 Active Directory 域服务2.2. 将服务器提升为域控制器2.3. 检查域控服务器配置信息 3. 管理域账号3.1. 新建域管理员账号3.2. 新建普通域账号 4. 服务器加域和退域4.1. 服务器加域操作4.2. 服务器退域操作 总…

谷歌地图 | 路线优化 API 助力企业解锁物流新潜能

在当今竞争激烈的市场环境中&#xff0c;企业面临着越来越大的压力&#xff0c;需要提高运营效率、降低成本并满足不断增长的客户期望。对于依赖车队进行交付或服务的企业来说&#xff0c;这些挑战尤为艰巨。 近日&#xff0c; Google 地图平台路线优化 API 已经正式上线。路线…

推荐 2个功能强大的黑科技工具,真的会让你直呼卧槽

Waifu2X Waifu2x 是一个基于深度学习的开源项目&#xff0c;主要用于处理二次元动漫风格的图像。它使用卷积神经网络&#xff08;CNN&#xff09;进行超分辨率处理和降噪&#xff0c;能够将图像放大2倍或更多&#xff0c;同时显著提高清晰度和减少噪声。Waifu2x 特别针对日系漫…

React 中如何使用 Monaco

Monaco 是微软开源的一个编辑器&#xff0c;VSCode 也是基于 Monaco 进行开发的。如果在 React 中如何使用 Monaco&#xff0c;本文将介绍如何在 React 中引入 Monaco。 安装 React 依赖 yarn add react-app-rewired --dev yarn add monaco-editor-webpack-plugin --dev yarn…

海外短剧CPS推广分佣系统平台讲解,他和短剧播放平台有啥区别?

首先来讲讲什么是海外短剧系统&#xff1f;什么是海外短剧cps系统&#xff1f;这俩有何区别&#xff1f; 海外短剧系统 顾名思义&#xff1a;就是做一套海外短剧系统&#xff0c;把剧放在自己的系统内&#xff0c;让用户来充值&#xff0c;充值的钱全部都是我自己的&#xff…

广州自闭症机构哪家好?

在广州&#xff0c;众多的自闭症康复机构中&#xff0c;星贝育园自闭症儿童康复学校以其独特的优势脱颖而出。 一、专业的师资团队 我们拥有一支经验丰富、专业素养极高的师资队伍。每位老师都经过严格的专业培训&#xff0c;深入了解自闭症儿童的特点和需求。他们不仅具…

数字化工厂EasyCVR视频监控智能解决方案:引领工业4.0时代新趋势

随着工业4.0的深入发展和数字化转型的浪潮&#xff0c;数字化工厂视频监控智能解决方案成为了现代工业生产中不可或缺的一部分。这一解决方案集成了先进的视频监控技术、人工智能&#xff08;AI&#xff09;和大数据分析&#xff0c;为工厂提供了更高效、更安全、更智能的监控和…