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原理是注册一个钩子回调而已。
转载于:https://www.cnblogs.com/mophy/p/8604697.html
element-UI中table表格的row-click事件怎么获取一行数据的id相关推荐
- Element UI 之table表格表头过长使用点点…显示,并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示 需求 鼠标移入表头 关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
- 使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格 上一篇: MongoDB 聚合 下一篇: vue router 路由守卫 登录验证 https://github.com/SheetJS ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- Element UI 之table表格表头过长使用点点...显示,并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
- Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
- Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
- element ui中select 下拉框在火狐浏览器最后一行显示不完全(谷歌正常)
在项目开发的时候用到了el-scrollbar组件 并且设置了隐藏横向滚动条 下面展示一些 内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
- Element ui中table标签上下滚动时表格错位
在style中加 /deep/.el-table__fixed-body-wrapper .el-table__body {padding-bottom: 20px; }
- element UI中table操作栏更多按钮展示与折叠的实现
1.然后给大家看下动态图 2.解决思路: 一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框,后面看了下elementUI文档上有个组件可以利用,那就是Popover 弹出框 废话不 ...
- element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图 解决方法: Step1:在app.vue中加入css样式 <st ...
最新文章
- matlab数值分析拟合实例,数值分析函数拟合matlab代码.doc
- 计算机基本信息的获取
- github大学课程_GitHub基础教程:如何使用GitHub课程
- redis之事务主从复制
- html 增加和删除一行,关于JS点击增加一行,点击删除一行的问题?
- 跨域将.net 工程嵌入别的系统页面中发生的js、ajax的拒绝访问的错误
- ASCⅡ码与字符的相互转化
- java日期函数_java常用日期函数总结
- 苹果可能会失去中国的iPad商标
- 为什么mac Safari提示:打不开该网页,因为无法与服务器建立安全的链接?
- ceph osd为down的情况
- day07 c++复习 核心编程02 核心内容(1、友元 2、3、继承 )
- 中兴服务器400,中兴通讯高性能400G方案:攀登5G高峰
- python中slice是什么类型,python中slice是什么类型_在python中,slice是一个副本还是一个poin...
- 使用C#编写一个读取和判断股票实时成交数据的小工具
- 计算机突然需要管理者密码,为什么windows7旗舰版开启管理员帐号登录需要密码...
- 计算机专业学生给家长的一封信,大学致家长的一封信
- 小技巧: 掀开 Metacity 的同化殊效
- 【会议征稿|SPIE独立出版|往届已检索】第二届人工智能、虚拟现实与可视化国际学术会议(AIVRV 2022)
- 会场音乐 播放器 适合上场、休息等
热门文章
- JavaScript语言核心(五)-- 异步 async/await
- 记TensorFlow项目开源一周年
- !!! SQL 数据库开发基础 传智!
- 【Best Time to Buy and Sell Stock II】cpp
- [LeetCode] Minimum Window Substring 散列映射问题
- 动态规划算法 dynamic programming
- MPLS ××× Carrier Supporting Carrier Option AB(一)
- WPF中DataGrid在没有数据的时候也可以显示水平滚动条
- 移动端的click事件延迟触发的原理是什么?如何解决这个问题?
- MoneyRunner API汇总