基于el-table实现行内增删改

news2024/11/26 22:27:19

实现效果:

在这里插入图片描述

核心代码:

<el-table :data="items"
                  style="width: 100%;margin-top: 16px"
                  border
                  :key="randomKey">
          <el-table-column label="计划名称"
                           property="name">
            <template slot-scope="{row}">
              <template v-if="row.edit">
                <el-input v-model="row.name"></el-input>
              </template>
              <span v-else>{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划完成时间"
                           property="executionDate" width="175">
            <template slot-scope="scope">
              <el-date-picker v-if="scope.row.edit" style="width: 153px;" type="date"
                              v-model="scope.row.timeEnd">
              </el-date-picker>
              <span v-else>{{ parseTime(scope.row.timeEnd) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="协同人"
                           property="leaderList">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select
                  v-model="scope.row.leaderList"
                  clearable filterable multiple>
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.nickname"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </template>
              <span v-else>{{ scope.row.leaderName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="执行人" width="80">
            <template>
              <span>{{ $store.getters.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="100">
            <template slot-scope="{row,column,$index}">
              <el-button
                v-if="row.edit"
                type="success" icon="el-icon-check" circle
                size="small"
                @click="confirmEdit(row)"
              >
              </el-button>
              <el-button
                v-if="row.edit"
                icon="el-icon-close" circle
                size="small"
                @click="cancelEdit(row)"
              >
              </el-button>
              <el-button
                type="primary" icon="el-icon-edit" circle
                v-if="!row.edit"
                size="small"
                @click="row.edit=!row.edit"
              >
              </el-button>
              <el-button
                type="danger" icon="el-icon-delete" circle
                size="small" @click="handleDelete($index)"
                v-if="!row.edit"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex;margin-top: 28px;justify-content: center;">
        <el-button @click="addSon" size="small" icon="el-icon-plus">添加子计划</el-button>
      </div>

Method:

cancelEdit(row) {
      row.name = row.oldName
      row.leaderList = row.oldLeaderList
      row.timeEnd = row.oldTimeEnd
      row.leaderName = row.oldLeaderName
      row.edit = false
      this.$message({
        message: '已恢复原值',
        type: 'warning'
      })
    },
    confirmEdit(row) {
      row.edit = false
      row.oldName = row.name
      row.oldLeaderList = row.leaderList
      row.oldTimeEnd = row.timeEnd
      let arr = []
      row.leaderList.forEach(i => {
        let userName = this.userList.find(({userId}) => userId === i).nickname
        arr.push(userName)
      })
      row.leaderName = arr.join()
      row.oldLeaderName = row.leaderName
      this.$message({
        message: '修改成功',
        type: 'success'
      })
    },
    handleDelete(index) {
      this.items.splice(index, 1)
    },
    addSon() {
      this.items.push({
        name: null,
        timeEnd: null,
        leaderList: [],
        leaderName: null,
        edit: true
      })
    },

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

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

相关文章

40.HarmonyOS鸿蒙系统 App(ArkUI)实现页面跳转与返回

1.新建项目&#xff0c;默认创建inext.ets界面。 2.右键page添加第二个页面&#xff0c;设置page2,点击finish 设置按钮触发事件&#xff1a; page2.ets按钮触发事件 index.ets import FaultLogger from ohos.faultLogger import promt2 from ohos.prompt import promt_action…

Linux重点思考(中)--端口/静态内存/负载/日志

这里写目录标题 知道的linux常用命令&#xff1a;查看指定端口进程netstat -pantunetstat -pantu|grep 22 静态运行内存free硬盘物理内存df和du当前负载uptime查看日志awk统计文件每一行单词sed 替换文件单词 知道的linux常用命令&#xff1a;查看指定端口进程 netstat -pantu…

C#简单——多选框控件相关的神奇问题

他们真的很简单&#xff0c;但我怎么总是忘记啊QAQ 还是记下来吧&#xff0c;下次直接copy 点开后出现 有列名 列名有数据&#xff0c;有表 表里有数据但不显示的情况 解决&#xff1a;点击小三角-点击Design View-Columns-需要在这里对下拉列表里的内容进行对应配置。 多选框…

ngAlain下使用nz-select与文件上传框出现灵异bug

bug描述 初始化页面&#xff0c;文件上传框无法出现&#xff1a; 但点击一次选择框以后&#xff0c;就会出现&#xff1a; 真的很神奇。。。 下面逐步排查看看是什么原因。 设想一&#xff1a; 选择框与文件框不可同时存在&#xff0c;删掉选择框看看&#xff1a; 还…

pytest--python的一种测试框架--pycharm创建项目并进行接口请求

前言 学习request的使用&#xff0c;在用之前&#xff0c;用官方文档提供的接口&#xff1a;https://api.github.com/events&#xff1b; ctrl鼠标左键可以进入被调用函数源码&#xff0c;可以看到第一个参数URL是必须参数&#xff0c;params是选填&#xff0c;**kwargs是关键…

基于单片机的自动浇灌系统的设计

本文设计了一款由单片机控制的自动浇灌系统。本设计的硬件电路采用AT89C51单片机作为主控芯片,采用YL-69土壤湿度传感器检测植物的湿度。通过单片机将采集湿度值与设定值分析处理后,控制报警电路和水泵浇灌电路的开启,从而实现植物的自动浇灌。 1 设计目的 随着生活水平的…

哥本哈根Major后steam搬砖该何去何从?

都在问我哥本哈根major比赛过后市场会不会崩盘呢&#xff1f;说实话&#xff0c;我是不喜欢预测市场的&#xff0c;其实是没那个本事而已。若真有这个预测市场走势的本事&#xff0c;我还用坐在这里每天苦哈哈的搬砖吗&#xff1f;我直接干囤卡囤号的倒卖生意岂不早发财了&…

Docker 哲学 - push 本机镜像 到 dockerhub

注意事项&#xff1a; 1、 登录 docker 账号 docker login 2、docker images 查看本地镜像 3、注意的是 push镜像时 镜像的tag 需要与 dockerhub的用户名保持一致 eg&#xff1a;本地镜像 express:1 直接 docker push express:1 无法成功 原因docker不能识别 push到哪里 …

LeetCode题练习与总结:N皇后

一、题目描述 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决…

【嵌入式——C语言】VScode编写C程序、交叉编译

【嵌入式——C语言】VScode编写C程序、交叉编译 第一步第二步第三步第四步第五步第六步第七步第八步 第一步 下载Visual Studio Code下载地址 然后直接安装就可以了。 第二步 前提是你的电脑上安装了WSL。。。 打开vscode的扩展&#xff0c;输入WSL进行安装 安装完之后在窗…

SpringBoot 集成分布式任务调度 XXL-JOB【保姆级上手】

文章目录 XXL-JOB 介绍分布式任务调度XXL-JOB 概述 快速入门下载源码初始化调度数据库编译源码调度中心调度中心介绍配置调度中心部署调度中心集群部署调度中心&#xff08;可选&#xff09;Docker 镜像方式搭建调度中心&#xff08;可选&#xff09; 执行器执行器介绍添加依赖…

DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧

遍历是指通过或遍历节点树 遍历节点树 通常&#xff0c;您想要循环一个 XML 文档&#xff0c;例如&#xff1a;当您想要提取每个元素的值时。 这被称为"遍历节点树"。 下面的示例循环遍历所有 <book> 的子节点&#xff0c;并显示它们的名称和值&#xff1a;…

交替子数组计数 - 力扣题解

⭐简单说两句⭐ ✨ 正在努力的小新~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &…

设计模式(一)简介

一、书籍推荐及博客 大话设计模式 设计模式的艺术 XXL开源社区 | 博客 二、通俗版概念 创建型模式、结构型模式、行为型模式 怎么建房子、建什么样的房子、建的房子有什么用 三、重点模式及简述 1、创建型模式 工厂方法&#xff08;多态工厂的实现&#xff09; 抽象工厂…

JAVA流 学习思考

1. 水在前面 接着上周的Lambda表达式&#xff0c;这周学习了流。说实话作为工具来讲&#xff0c;这玩意好像挺强大的&#xff0c;倒是真要掌握这工具貌似要记住不少东西&#xff0c;年纪大了不想背书的可以看看这篇水文&#xff0c;等到用的时候再根据具体的使用找度娘。&#…

常用技术-Timer定时器

什么是Timer Timer是JDK自带的任务调度工具类&#xff0c;只需要java.util.Timer和java.util.TimerTask两个类就可以实现基本任务调度功能 Timer是一种线程设施&#xff0c;用于安排以后在后台线程中执行的任务。可安排任务执行一次&#xff0c;或者定期重复执行&#xff0c;…

谈谈配置中心?

配置中心可以做集中式的服务配置管理&#xff0c;比如配置一些数据库连接的URL&#xff0c;一些共用的配置且可动态调整的参数。如果不采用集中式的管理&#xff0c;会导致修改起来特别麻烦&#xff0c;一个个的修改特别繁琐。 Nacos Config配置中心中采用的是客户端拉取数据&a…

腾讯云轻量应用服务器“月流量”限制?流量不够怎么办?

腾讯云轻量应用服务器套餐带流量包&#xff0c;就是有月流量限制的意思&#xff0c;超出轻量套餐的流量需要另外支付流量费&#xff0c;轻量服务器地域不同超额流量费用也不同&#xff0c;北京上海广州等中国内地地域流量价格是0.8元每GB&#xff0c;中国香港地域流量价格是1元…

Xilinx IDDR及ODDR使用和仿真

平台&#xff1a;Vivado2018 官方相关文档&#xff0c;ug471_7Series_SelectIO.pdf 关于IDDR与ODDR Input DDR Resource(IDDR) 外部的数据在时钟的上下沿同时传输数据&#xff0c;我们可以使用IDDR原语将输入的单bit数据转化为2bit的数据输出。同时数据速率变为原来的二分之一…

python的Web框架比较

个人博客:Sekyoro的博客小屋 个人网站:Proanimer的个人网站 之前好像写过一些关于Python的Web框架?现在再按照ASGI与原本的WSGI区分一下,顺便把框架(framework)与库(library)区分一下. 之前我也写过(或者说想过)一些类似生态以及作用的框架进行比较,大多都是看看网上评价以及s…