el-table 操作列(编辑or删除) 获取本行相关数据
简单说明:开发的时候,经常会遇到表格后面跟着操作列,一般都是编辑或者删除,那么 就需要获取到 本行数据相关的id或者其他附属信息。ok,下边放代码
//vue el-table的部分代码
<el-table-column width="200" label="操作" align="center">
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete" circle @click.stop="deleteProById(scope.$index, scope.row)"></el-button>
</template>
</el-table-column>
//js 代码
deleteProjectById(params,row){
console.log(params)
console.log(row)
//proVo 是在 data(){} 全局声明的一个对象 此行代码的意思就是 把Object.assign({}, row)获取到的行数据映射为对象
this.proVo = Object.assign({}, row)
console.log(JSON.stringify(this.proVo))
let objId = this.proVo.proId
console.log(objId);
//````其他业务代码省略
}
el-table 操作列(编辑or删除) 获取本行相关数据的更多相关文章
- elementui table的新增,编辑和删除
\ 新增 this.tableData.unshift(data); 编辑 this.$set(this.tableData,data.index,data); 删除 rows.splice(inde ...
- kafka删除topic及其相关数据
1.删除kafka存储目录(server.properties文件log.dirs配置,默认为"/tmp/kafka-logs")相关topic目录 2.Kafka 删除topic ...
- mysql数据库的数据变更事件获取以及相关数据
https://medium.com/@Masutangu/udf-trigger%E5%AE%9E%E6%97%B6%E7%9B%91%E6%8E%A7mysql%E6%95%B0%E6%8D%AE ...
- react 项目实战(七)用户编辑与删除
添加操作列 编辑与删除功能都是针对已存在的某一个用户执行的操作,所以在用户列表中需要再加一个“操作”列来展现[编辑]与[删除]这两个按钮. 修改/src/pages/UserList.js文件,添加方 ...
- 【jquery】【ztree】节点添加自定义按钮、编辑和删除事件改成自己定义事件
setting添加 edit: { drag: { isCopy: false, isMove: true }, enable: true,//设置是否处于编辑状态 showRemoveBtn: sh ...
- layui中table表格的操作列(删除,编辑)等按钮的操作
暂停和中止按钮功能 if (obj.event === 'del') { layer.confirm('确认中止么', function (index) { $.ajax({ type: " ...
- Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据
关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...
- DataTable相关操作,筛选,取前N条数据,获取指定列数据
DataTable相关操作,筛选,取前N条数据,获取指定列数据2013-03-12 14:50 by Miracle520, 2667 阅读, 0 评论, 收藏, 编辑 1 #region DataT ...
- linux --> VIM的列编辑操作
VIM的列编辑操作 一.删除列 1.光标定位到要操作的地方. 2.CTRL+v 进入“可视 块”模式,选取这一列操作多少行. 3.d 删除. 二.插入列 插入操作的话知识稍有区别.例如在每一行 ...
随机推荐
- Python学习之准备工作
Python学习之准备工作 编程语言历史 在计算机硬件基础中我们大概介绍了一下计算机的发展历史.了解到在曾经有一段时期里计算机是不存在操作系统这一概念的,所有需要计算机完成的操作都需要当时的程序员来与 ...
- 暑假集训Day0
啊这 跟学长学的要写日记 希望到时候能写省选集训的总结 咳咳 今天上午做了一上午苦力好像让老苏夸了难以接受(年纪两百考到年级两千他居然没有干我) 上午搞卫生搞到了十点半………… 替女生拉包提东西了!! ...
- python之单元测试及unittest框架的使用
例题取用登录模块:代码如下 def login_check(username,password): ''' 登录校验的函数 :param username:账号 :param password: 密码 ...
- Flask项目实战:创建电影网站-创世纪(1)
以后要养成写博客的习惯,用来做笔记.本人看的东西很多很杂,但因为工作中很少涉及,造成看了之后就忘,或者看了就看了,但是没有融入的自己的知识体系里面. 写博客一方面是做记录,一方面是给这段时间业余学习的 ...
- 如何用好 IDEA ,Java 撸码效率至少提升 5 倍?
以前的Java项目中,充斥着太多不友好的代码:POJO的getter/setter/toString:异常处理:I/O流的关闭操作等等,这些样板代码既没有技术含量,又影响着代码的美观,Lombok应运 ...
- Git 新建版本库命令
Command line instructions Git global setup git config --global user.name "张三" git config - ...
- 关于c++中结构体列表初始化,聚合问题
聚合(aggregate) C++语法规定:不能使用初始值列表来初始化"非聚合(non-aggregate)"的对象.那么,什么才算是"聚合"呢?C++认为聚合 ...
- Let's GO(一)
近来开始学Go,留此博客以记录学习过程,顺便鞭策自己更加努力. 人生苦短,Let's GO! Let's GO(一) Let's GO(二) Let's GO(三) Let's GO(四) 简单介绍 ...
- CSS基础面试题,快来查漏补缺
本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...
- 06 Vue生命周期钩子
生命周期钩子 表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数 钩子函数: 满足特点条件被回调的方法 new Vue({ el: "#app" ...