简单说明:开发的时候,经常会遇到表格后面跟着操作列,一般都是编辑或者删除,那么 就需要获取到 本行数据相关的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删除) 获取本行相关数据的更多相关文章

  1. elementui table的新增,编辑和删除

    \ 新增 this.tableData.unshift(data); 编辑 this.$set(this.tableData,data.index,data); 删除 rows.splice(inde ...

  2. kafka删除topic及其相关数据

    1.删除kafka存储目录(server.properties文件log.dirs配置,默认为"/tmp/kafka-logs")相关topic目录 2.Kafka 删除topic ...

  3. 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 ...

  4. react 项目实战(七)用户编辑与删除

    添加操作列 编辑与删除功能都是针对已存在的某一个用户执行的操作,所以在用户列表中需要再加一个“操作”列来展现[编辑]与[删除]这两个按钮. 修改/src/pages/UserList.js文件,添加方 ...

  5. 【jquery】【ztree】节点添加自定义按钮、编辑和删除事件改成自己定义事件

    setting添加 edit: { drag: { isCopy: false, isMove: true }, enable: true,//设置是否处于编辑状态 showRemoveBtn: sh ...

  6. layui中table表格的操作列(删除,编辑)等按钮的操作

    暂停和中止按钮功能 if (obj.event === 'del') { layer.confirm('确认中止么', function (index) { $.ajax({ type: " ...

  7. Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

    关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的 关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str= ...

  8. DataTable相关操作,筛选,取前N条数据,获取指定列数据

    DataTable相关操作,筛选,取前N条数据,获取指定列数据2013-03-12 14:50 by Miracle520, 2667 阅读, 0 评论, 收藏, 编辑 1 #region DataT ...

  9. linux --> VIM的列编辑操作

    VIM的列编辑操作   一.删除列 1.光标定位到要操作的地方. 2.CTRL+v 进入“可视 块”模式,选取这一列操作多少行. 3.d 删除.   二.插入列 插入操作的话知识稍有区别.例如在每一行 ...

随机推荐

  1. LeetCode 80,不使用外部空间的情况下对有序数组去重

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题的第49篇文章,我们一起来看LeetCode的第80题,有序数组去重II(Remove Duplicates fr ...

  2. Zookeeper分布式过程协同技术 - 部署及设置

    Zookeeper分布式过程协同技术 -  部署及设置 Zookeeper支持单机模式.伪集群模式.集群模式三种部署方式.演示部署环境为CentOS.jdk版本为1.8.Zookeeper版本为3.4 ...

  3. 计算机网络之DNS常见攻击

    DNS欺骗 在Internet上存在的DNS服务器有绝大多数都是用bind来架设的,使用的bind版本主要为bind 4.9.5+P1以前版本和bind 8.2.2-P5以前版本.这些bind有个共同 ...

  4. Python实用笔记 (3)条件判断

    可以执行多条语句,靠的是缩进原则,看起来也更板扎(注意冒号) age = 3 if age >= 18: print('adult') elif age >= 6: print('teen ...

  5. fatal error C1189: #error : This file requires _WIN32_WINNT to be #defined at least to 0x0403. Value 0x0501 or higher is recommended.

    说了原因,下面是修改方法,就是在stdafx.h文件中修改相关的定义,修改完后的效果应该如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 #ifndef WINVER ...

  6. Python之浅谈装饰器

    目录 闭包函数 装饰器 迭代器 闭包函数 就是将原先需要调用好几遍的函数和参数写入一个包内,下次调用时一起调用 def name(x): x=1 def age(): print(x) return ...

  7. 使用telnet测试指定端口的连通性

    大家好,我是良许. 大家知道,telnet 是一个阉割版的 ssh ,它数据不加密,数据容易被盗窃,也容易受中间人攻击,所以默认情况下 telnet 端口是必须要被关闭的. telnet为用户提供了在 ...

  8. 转载--未看关于移动端Web远程开发调试

    移动端Web开发调试之Chrome远程调试(Remote Debugging) http://blog.csdn.net/freshlover/article/details/42528643 移动端 ...

  9. vue+elementUI 图片上传问题

    图片上传问题,获取后台的图片,并点击可以更换图片,并把图片存储到数据库中: (1)在编辑页面上,action指的图片上传的地址,header指请求头: (2)因为element-ui有自己上传的接口, ...

  10. 技术干货丨通过wrap malloc定位C/C++的内存泄漏问题

    摘要:用C/C++开发的程序执行效率很高,但却经常受到内存泄漏的困扰.本文提供一种通过wrap malloc查找memory leak的思路. 用C/C++开发的程序执行效率很高,但却经常受到内存泄漏 ...