简单说明:开发的时候,经常会遇到表格后面跟着操作列,一般都是编辑或者删除,那么 就需要获取到 本行数据相关的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. C++核心内容和机制

    备注:不局限与C++版本   一. 基础知识 数据类型和POD/Trivial 数据类型: 类型转换: NULL和nullptr: 操作符重载: 全局静态变量和成员静态变量的申明和初始化: 左值和右值 ...

  2. Java工具类——日期相关的类

    前言 在日常的开发工作当中,我们经常需要用到日期相关的类(包括日期类已经处理日期的类),所以,我就专门整理了一篇关于日期相关的类,希望可以帮助到大家. 正文 一.日期类介绍 在 Java 里面,操作日 ...

  3. Java 从入门到进阶之路(二十六)

    在之前的文章我们介绍了一下 Java 中的  集合框架中的Collection 的子接口 List,本章我们来看一下 Java 集合框架中的Collection 的子接口 Queue. 在之前我们讲 ...

  4. typeof、instanceof与constructor

    typeof返回一个表达式的数据类型的字符串,返回结果为js基本的数据类型,包括number,boolean,string,object,undefined,function. 语法: typeof( ...

  5. box-shadow,text-shadow

    box-shadow:inset 30px 40px 20px #f00; 如上实例,总共五个参数,其中第一个代表阴影是向内阴影还是向外阴影,第二个参数代表向右(从左向右)的偏移量,第三个参数代表向下 ...

  6. thinkphp将对象变成一维数组?

    thinkphp使用select查询出的数据为二维数组,如果想将二维数组转一维,可以使用: $x为二维数组对象 php版本要大于5.5.0 $userid_array = array_column($ ...

  7. zookeeper3.5.5 centos7 完全分布式 搭建随记

    zookeeper3.5.5 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭 ...

  8. Xenon's Attack on the Gangs(树规)

    题干 Input Output Example Test 1: Test 2: 3 5 1 2 1 2 2 3 1 3 1 4 3 5 3 10 Tips 译成人话 给n个结点,n-1条无向边.即一棵 ...

  9. LintCode笔记 - 145.大小写转换 - 极简之道 - 最短代码

    这道题目一眼就能看出是送分题,当然在这里也不谈高难度的实现逻辑,肯定有同学会想直接用自带函数实现不就可以了吗? 对的,就是这么简单,然而今天的重点是如何把代码简写到最短. 本文章将带你把代码长度从 一 ...

  10. es6新增特性总结

    定义 ES6是ECMA为JavaScript制定的第6个标准版本,标准委员会决定,标准在每年6月正式发布并作为当年的正式版本,接下来的时间里就在此版本的基础上进行改动,直到下一年6月草案就自然变成新一 ...