ElementUI之row-click

2019独角兽企业重金招聘Python工程师标准>>>

当某一行被点击时会触发该事件 row, event, column

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>AdminLTE 2 | Morris.js Charts</title><!-- Tell the browser to be responsive to screen width --><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><link rel="stylesheet" href="../plugins/elementUI/elementUI.css"><style></style>
</head><body class=""><div id="demo">
<el-table:data="tableData6"borderstyle="width: 100%" @row-click="clickTr"><el-table-columnprop="id"label="ID"width="180"></el-table-column><el-table-columnprop="name"label="姓名"></el-table-column><el-table-columnprop="amount1"sortablelabel="数值 1"></el-table-column><el-table-columnprop="amount2"sortablelabel="数值 2"></el-table-column><el-table-columnprop="amount3"sortablelabel="数值 3"></el-table-column></el-table>
</div><script src="../js/vue.js"></script><script src="../plugins/elementUI/elementUI.js"></script><script>var demo = new Vue({el: '#demo',data: {tableData6: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9}, {id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}]},methods: {clickTr(row, event, column){//console.log(row["id"]) 跟下面效果一样console.log(row.id)//获取各行id的值}}})</script>
</body></html>

转载于:https://my.oschina.net/u/2612473/blog/1607027

ElementUI之row-click相关推荐

vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table，treeTable
该组件基于技术栈,主要涉及vue-cli生成的webpack项目脚手架,在此脚手架项目基础上完成的,整合了element-ui开源vue的UI项目 1.vue-cli的安装使用 npm install ...
vue+elementUi发送邮件组件编写
父组件: <email-dialog v-if="showemailDialog" v-on:closeemailDialog="closeemailDialog& ...
elementui 样式渲染的慢_解决vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序 ...
vue+element-ui 实现table单元格点击编辑，并且按上下键移动
1.接到需求是点击键盘上下键,控制输入框移动方便输入数据 2.相关实现代码 <el-table-column label="档距(m)" prop="span&qu ...
java+vue下载xls文件到本地
1.后端java springboot 背景:文件是以xls类型的文件. 第一步:添加依赖 <dependency><groupId>org.apache.poi</gr ...
【template写法】TS + vue3.2 + vite2 + element-plus 通用表格组件封装
这里通用表格,和上一篇通用表单一样的(表格组件都在我博客里),配置完全可控,然后每个el-table-column 都是通过传入的数组来循环便利渲染,大部分常用实现也写在了下面,无法具体实现或需要你自 ...
开启大数据时代谷歌三篇论文－BigTable
1 摘要 Bigtable 是一个分布式的结构化数据存储系统,它被设计用来处理海量数据:通常是分布在数千台普通服务器上的 PB 级的数据. Google 的很多项目使用 Bigtable 存储数据, ...
饿了么ui组件中分页获取当前选中的页码值_【Web技术】314 前端组件设计原则
点击上方"前端自习课"关注,学习起来~ 译者:@没有好名字了译文:https://github.com/lightningminers/article/issues/36,http ...
三篇论文之bigtable
Bigtable:一个分布式的结构化数据存储系统译者:alex 摘要 Bigtable是一个分布式的结构化数据存储系统,它被设计用来处理海量数据:通常是分布在数千台普通服务器上的PB级的数据.Goo ...
[译] 前端组件设计原则
原文地址:Front end component design principles 原文作者:Andrew Dinihan 文中示例代码:传送门限于个人能力,如有错漏之处,烦请不吝赐教. 前言我 ...

ElementUI之row-click

ElementUI之row-click相关推荐

最新文章

热门文章