<el-table :data="tableData" style="width: 100%" @row-click="openDetails(id)">
<el-table-column prop="wName" label="公众号名称"></el-table-column>
<el-table-column prop="wID" label="公众号ID"></el-table-column>
<el-table-column prop="seller" label="商家名称"></el-table-column>
<el-table-column prop="sign" label="签约状态"></el-table-column>
<el-table-column prop="amount_1" label="收款总额"></el-table-column>
<el-table-column prop="amount_2" label="退款总额"></el-table-column>
<el-table-column prop="amount_3" label="代收总额"></el-table-column>
<el-table-column prop="amount_4" label="保证金"></el-table-column>
<el-table-column prop="date" label="签约日期"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
</el-table>

该如何把一行数据的id放到@row-click里面当作参数传递呢?

export default {
data () {
return {
tableData: [
{
id: '1',
wName: 'xxx公众号1',
wID: 'zjfiawsf',
seller: 'xxxxx公司xxxxx公司xxxxx公司',
sign: '已签约',
amount_1: '14614.00',
amount_2: '0.00',
amount_3: '322.00',
amount_4: '32122.00',
date: '2019-08-09',
status: '未冻结'
},
{
id: '2',
wName: 'xxx公众号2',
wID: 'zjfiawsf',
seller: 'xxxxx公司xxxxx公司xxxxx公司',
sign: '已签约',
amount_1: '14614.00',
amount_2: '0.00',
amount_3: '322.00',
amount_4: '32122.00',
date: '2019-08-09',
status: '未冻结'
}
]
}
},
methods: {
//打开详情页弹窗
openDetails(id) {
console.log(id)
},
}
}
// 文档中有:row-click    当某一行被点击时会触发该事件    三个参数:row, event, column
methods: {
//打开详情页弹窗
openDetails(row) {
console.log(row.id);
},
}

row-click返回了三个参数 row, event, column

row-click 当某一行被点击时会触发该事件 row, event, column
在作用域中没有id这个变量,所有点击行会报错。
不应该传递参数,element本身对row-click这个事件自动注入了必要的参数(row, event, column),若传入的openDetails原理是注册一个钩子回调而已。

element-UI中table表格的row-click事件怎么获取一行数据的id的更多相关文章

  1. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  2. Element ui 中的表格数据格式转换

  3. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

  4. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  5. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

  6. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  7. 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...

  8. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  9. Element UI的Table用法

    Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

随机推荐

  1. C# html生成PDF遇到的问题,从iTextSharp到wkhtmltopdf

    我们的网站业务会生成一个报告,用网页展示出来,要有生成pdf并下载的功能,关键是生成pdf. 用内容一段段去拼pdf,想想就很崩溃,所以就去网上找直接把html生成pdf的方法. 网上资料大部分都是用 ...

  2. Spring Boot (10) mybatis三种动态sql

    脚本SQL xml配置方式见mybatis讲解,下面是用<script>的方式把它照搬过来,用注解来实现.适于xml配置转换到注解配置 @Select("<script&g ...

  3. 【Oracle】redo与undo

    一 .redo(重做信息) 是Oracle在线(或归档)重做日志文件中记录的信息,万一出现失败时可以利用这些数据来“重放”(或重做)事务.Oracle中记录这些信息的文件叫做redo log file ...

  4. Christopher G. Atkeson 简介

    有一个事实:双足机器人的稳定性问题单靠算法是搞不定的!!! 在2015 DARPA 机器人挑战赛中,许多参赛团队的机器人使用了Atlas,他们通过安装他们自己的软件并修改来让机器人保持平衡.来自WPI ...

  5. Python字符串格式化--formate()的应用

    1.简单运用字符串类型格式化采用format()方法,基本使用格式是:转自 <模板字符串>.format(<逗号分隔的参数>) 调用format()方法后会返回一个新的字符串, ...

  6. eas之日期控件

    日期选择框能进行日期和时间的编辑,默认情况下只能进行日期选择“××××年××月××日”,可通过调用用函数setTimeEnabled(boolean)来设置是否也有时间编辑.对日期进行编辑时,可手工直 ...

  7. tesuto-Mobius

    求 \begin{equation*}\sum_{i=1}^n\sum_{j=1}^m[\gcd(i,j)=k]\end{equation*} 的值. 莫比乌斯反演吧. \begin{align*}& ...

  8. SQLSERVER2017 链接数据库不行

    以为作业要把mysql 数据导入sqlserver,自己装了sqlserver2017, 通过ODBC 来先创建ODBC,mysql的数据库然后测试成功后,在sqlserver创建链接数据库,一直有问 ...

  9. ubuntu 配置lamp

    官方配置网站:http://wiki.ubuntu.org.cn/LAMP_%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%AE%89%E8%A3%85%E9%85%8D%E7%BD%A ...

  10. 【2】数据采集 - urllib模块

    python2环境下关于urllib2的使用可以学习这篇文章.本文主要针对python3环境下使用urllib模块实现简单程序爬虫. 链接:https://www.jianshu.com/p/3183 ...