element-UI中table表格的row-click事件怎么获取一行数据的id
<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的更多相关文章
- Element Ui中table实现表格编辑效果
主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...
- Element ui 中的表格数据格式转换
- Element ui 中使用table组件实现分页记忆选中
我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- 关于html中table表格tr,td的高度和宽度
关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- Element UI的Table用法
Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...
随机推荐
- elasticsearch模板 template
https://elasticsearch.cn/article/335 elasticsearch模板 template 可以考虑的学习点: mapping的 _default_类型 动态模板:dy ...
- android.system.ErrnoException: open failed: ENOENT (No such file or directory) 07-19 20:27:45.011 66
在操作安卓版本23+的文件读取时,不仅要在maniests中声明,还要在代码中动态声明: ; private static String[] PERMISSIONS_STORAGE = { Manif ...
- Android中DatePicker与TimePicker用法讲解(包括DatePickerDialog与TimePickerDialog)
实现效果:将DatePicker和TimePicker修改的日期和时间实时显示在程序标题栏上. 1.通过DatePicker和TimePicker来实现 布局为main.xml <?xml ve ...
- UNIX SOCKET编程简介
1 . Layered Model of Networking Socket 编程的层次模型如下图所示, 最上面是应用层,应用层下面的是 SOCKET API 层,再下面是传输层和网络层 ...
- python 生成测试报告并发送邮件
前言: 使用unittest编写自动化测试脚本,执行脚本后可以很方便看到测试用例的执行情况. 但如果想向领导汇报工作,就需要提供更直观的测试报告. 思路: 使用unittest编写测试用例,HTMLT ...
- [转]使用Fiddler进行iOS APP的HTTP/HTTPS抓包
Fiddler不但能截获各种浏览器发出的HTTP请求, 也可以截获各种智能手机发出的HTTP/HTTPS请求.Fiddler能捕获iOS设备发出的请求,比如IPhone, IPad, MacBook. ...
- 团体程序设计天梯赛-练习集-L1-032. Left-pad
L1-032. Left-pad 根据新浪微博上的消息,有一位开发者不满NPM(Node Package Manager)的做法,收回了自己的开源代码,其中包括一个叫left-pad的模块,就是这个模 ...
- 02 java学习安装jdk及其环境配置
SUN公司1995年正式推出的一款语言 其实之前,Sun公司1991年,James Gosling等人就开始开发Oak语言,希望用于控制嵌入有效电视交换盒,1994年更名为Java,之前来自 与jav ...
- 整理Crontab 定时计划
一. 什么是crontab? crontab命令常见于Unix和类Unix的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于“crontab”文件中,以供之后读取和 ...
- Intro.js 分步向导插件使用方法
简介 为您的网站和项目提供一步一步的.更好的介绍 Intro.js 目前兼容 Firefox.Chrome 和 IE8,不兼容 IE6 和 IE7,后续版本将会提供更好的兼容. 在线演示及下载 在线演 ...