vue+ element table如何给指定的单元格添加点击事件?
今天使用vue,以及element-ui这个框架时,发现业务需要在表格里加一个连接跳转,当时立刻打开element的官网,进行查看http://element-cn.eleme.io/#/zh-CN/component/table是在<el-table>里进行添加事件的,而此时我进行尝试后发现这个是每一个单元格都需要跳转,不是我想要的针对某一列进行的点击跳转操作,于是各种技术贴开始搜索,最后发现一个网友的写法很可行。
我把参考网站贴出来https://segmentfault.com/q/1010000012511902
<el-table-column prop="goods_count" label="活动兑换商品" align="center" width="150" >
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleGoods(scope.row)" v-if="scope.row.goods_count==0">管理活动商品</el-button>
<el-button type="text" size="small" @click="handleGoods(scope.row)" v-else>{{scope.row.goods_count}}</el-button>
</template>
</el-table-column>
handleJoinGoods(row,id){
console.log(row.goods_count); }
其中<el-button>也可以换成别的你想要的标签,都是没有问题的。好了 这样问题就解决啦!
vue+ element table如何给指定的单元格添加点击事件?的更多相关文章
- 点击表格的单元格时实现变颜色,通过for循环为每个单元格添加一个onclick事件
<title>无标题文档</title> <script type="text/javascript" language="javascri ...
- 27.openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽
openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽 from openpyxl import Workbook,load_workbook from openpyxl.dra ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为所有表格的单元格添加边框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 在Excel里用vba给合并的单元格添加注释
Excel里使用VBA对已经合并的单元格添加注释,直接使用AddComment会报: 运行时错误 '1004':应用程序定义或者对象定义错误 找了很多文章都没找到怎么解决,最后发现在AddCommen ...
- POI单元格添加公式以及读取公式结果的值
POI提供了为单元格添加条件样式的方法,但是我并没有找到获取单元格改变后样式的方法,获取到样式依旧是没有改变之前的. 比如为单元格添加条件样式用于监听单元格值是否被修改,如果单元格值被修改那么字体颜色 ...
- C# DataGridView中指定的单元格不能编辑
注意:DataGridView控件是从.NET Framework 2.0版本开始追加的. ReadOnly属性的使用 DataGridView内所有的单元格不能编辑 当DataGridView.Re ...
- 使用POI设置导出的EXCEL锁定指定的单元格
注:要锁定单元格需先为此表单设置保护密码,设置之后此表单默认为所有单元格锁定,可使用setLocked(false)为指定单元格设置不锁定. sheet.protectSheet("&quo ...
- 在excel 中某一单元格添加指定字符的示例
="select TestSurveyID,'http://www.findoout.cn/survey/viewsurvey.aspx?tid='+CONVERT(varchar(10), ...
- element-ui 格式化树形数组在table组件中展示(单元格合并)
最近做的项目涉及到很多单元格合并问题,element-ui组件对于单元格合并的处理虽然很灵活,但是需要事先计算好每个单元格合并的rowspan和colspan,直接在span-method属性中计算实 ...
随机推荐
- 03 MySQL之数据类型和运算符
01-数据类型 MySQL支持多种数据类型,主要有 数值类型.日期/时间类型和字符串类型. 1.1 整数类型 1.2 浮点数类型和定点数类型 单精度浮点类型(FLOAT)和双精度浮点类型 (DOUBL ...
- python之scrapy爬取jd和qq招聘信息
1.settings.py文件 # -*- coding: utf-8 -*- # Scrapy settings for jd project # # For simplicity, this fi ...
- JAVA与c#中byte取值范围的差异
C#中分有符号类型的sbyte和无符号类型的byte Console.WriteLine("byte.min:{0},byte.max:{1},{2}byte", byte.Min ...
- 关于MacBook Pro外接4K/60HZ显示器的问题
我踩过的坑 MacBook Pro 外接 4K/60HZ显示器[显示器自带HDMI2.0支持4k] 拓展坞不支持4K/60HZ,最后导致只能支持 30HZ,鼠标移动明显延迟. 总结如下: DVI线类长 ...
- Python 线程----线程方法,线程事件,线程队列,线程池,GIL锁,协程,Greenlet
主要内容: 线程的一些其他方法 线程事件 线程队列 线程池 GIL锁 协程 Greenlet Gevent 一. 线程(threading)的一些其他方法 from threading import ...
- 在vue中让某个组件重新渲染的笨方法
在vue中,推崇的是数据驱动也就是数据更新进而使组件得以重新渲染:在某些情况下,我们想要在数据不改变的情况下,重新渲染组件:我遇到的一个情况是:同一个页面,两个tab页分别为tab1和tab2,公用了 ...
- Java-Redis Serializable序列化
在Java中使用redis存储User对象时,进行JUnit测试时,控制台: 2019-06-24 16:56:45.520 INFO 27688 --- [ main] j.LocalContain ...
- [转帖]中芯国际14nm秋季量产 7nm工艺或在2020年底问世
中芯国际14nm秋季量产 7nm工艺或在2020年底问世 https://news.mydrivers.com/1/641/641087.htm 中芯正在发力.. 今年秋天 14nm两场 明年底 7n ...
- Excel输入公式后只显示公式却不计算如何解决?
在使用Excel函数公式的时候,您是否碰到过输入公式,按下Enter键之后,单元格仍只显示公式,而不显示计算结果. 工具/原料 Excel 教程以Excel2013为例 方法/步骤 教 ...
- sqlyog注释的快捷键-先收藏
在学习使用sqlyog的时候,想要多行注释SQL语句,就去网上找了相关的快捷键,与大家分享,网上有很多! Ctrl+M 创建一个新的连接Ctrl+N 使用当前设置新建连接Ctrl+F4 断开当前连接 ...