当前位置: 首页 > news >正文

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

实现效果:

在这里插入图片描述

核心代码:

<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-selectv-model="scope.row.leaderList"clearable filterable multiple><el-optionv-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-buttonv-if="row.edit"type="success" icon="el-icon-check" circlesize="small"@click="confirmEdit(row)"></el-button><el-buttonv-if="row.edit"icon="el-icon-close" circlesize="small"@click="cancelEdit(row)"></el-button><el-buttontype="primary" icon="el-icon-edit" circlev-if="!row.edit"size="small"@click="row.edit=!row.edit"></el-button><el-buttontype="danger" icon="el-icon-delete" circlesize="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.oldNamerow.leaderList = row.oldLeaderListrow.timeEnd = row.oldTimeEndrow.leaderName = row.oldLeaderNamerow.edit = falsethis.$message({message: '已恢复原值',type: 'warning'})},confirmEdit(row) {row.edit = falserow.oldName = row.namerow.oldLeaderList = row.leaderListrow.oldTimeEnd = row.timeEndlet arr = []row.leaderList.forEach(i => {let userName = this.userList.find(({userId}) => userId === i).nicknamearr.push(userName)})row.leaderName = arr.join()row.oldLeaderName = row.leaderNamethis.$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.lryc.cn/news/328181.html

相关文章:

  • 《霍格沃茨之遗》推荐购买吗 《霍格沃茨之遗》不支持Mac电脑怎么办 crossover24软件值得买吗 crossover中文官网
  • 神经网络代码实现(用手写数字识别数据集实验)
  • 菜鸟笔记-Python函数-linspace
  • 为什么我们应该使用QGIS
  • 用Python实现办公自动化(自动化处理Excel工作簿)
  • BaseDao入门使用
  • 计算机毕业设计Python+Spark知识图谱高考志愿推荐系统 高考数据分析 高考可视化 高考大数据 大数据毕业设计 机器学习 深度学习 人工智能
  • 基于java+springboot+vue实现的电商个性化推荐系统(文末源码+Lw+ppt)23-389
  • 论文阅读,The Lattice Boltzmann Method: Principles and Practice(六)(1)
  • 新能源充电桩站场视频汇聚系统建设方案及技术特点分析
  • 三、音频隐写[Audacity、deepsound、dtmf2num、MMSSTV、虚拟声卡、MP3Stego]
  • 二、Web3 学习(区块链)
  • Linux内网提权
  • 聚观早报 | 抖音独立商城App上线;阿里云联发科合作
  • 第十四届蓝桥杯省赛C++ B组所有题目以及题解(C++)【编程题均通过100%测试数据】
  • 【御控物联】 IOT异构数据JSON转化(场景案例一)
  • Kubernetes-running app on kube
  • 简述如何系统地学习Python
  • bsd猜想 Murmuration of Eliptic Curves(笔记)
  • 小米汽车正式发布:开启智能电动新篇章
  • 线性代数笔记25--复数矩阵、快速傅里叶变换
  • 洛谷 P8783 [蓝桥杯 2022 省 B] 统计子矩阵
  • Rust 实战练习 - 8. 内存,ASM,外挂 【重磅】
  • XUbuntu22.04之Typora快捷键Ctrl+5不生效问题(二百二十六)
  • GRE_MGRE综合实验
  • 把组合损失中的权重设置为可学习参数
  • 用Bat启动jar程序
  • 网站维护页404源码
  • jmeter链路压测
  • 香港服务器怎么看是CN2 GT线路还是CN2 GIA线路?