今天使用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如何给指定的单元格添加点击事件?的更多相关文章

  1. 点击表格的单元格时实现变颜色,通过for循环为每个单元格添加一个onclick事件

    <title>无标题文档</title> <script type="text/javascript" language="javascri ...

  2. 27.openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽

    openpyxl 向指定单元格添加图片并修改图片大小 以及修改单元格行高列宽 from openpyxl import Workbook,load_workbook from openpyxl.dra ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:为所有表格的单元格添加边框

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 在Excel里用vba给合并的单元格添加注释

    Excel里使用VBA对已经合并的单元格添加注释,直接使用AddComment会报: 运行时错误 '1004':应用程序定义或者对象定义错误 找了很多文章都没找到怎么解决,最后发现在AddCommen ...

  5. POI单元格添加公式以及读取公式结果的值

    POI提供了为单元格添加条件样式的方法,但是我并没有找到获取单元格改变后样式的方法,获取到样式依旧是没有改变之前的. 比如为单元格添加条件样式用于监听单元格值是否被修改,如果单元格值被修改那么字体颜色 ...

  6. C# DataGridView中指定的单元格不能编辑

    注意:DataGridView控件是从.NET Framework 2.0版本开始追加的. ReadOnly属性的使用 DataGridView内所有的单元格不能编辑 当DataGridView.Re ...

  7. 使用POI设置导出的EXCEL锁定指定的单元格

    注:要锁定单元格需先为此表单设置保护密码,设置之后此表单默认为所有单元格锁定,可使用setLocked(false)为指定单元格设置不锁定. sheet.protectSheet("&quo ...

  8. 在excel 中某一单元格添加指定字符的示例

    ="select TestSurveyID,'http://www.findoout.cn/survey/viewsurvey.aspx?tid='+CONVERT(varchar(10), ...

  9. element-ui 格式化树形数组在table组件中展示(单元格合并)

    最近做的项目涉及到很多单元格合并问题,element-ui组件对于单元格合并的处理虽然很灵活,但是需要事先计算好每个单元格合并的rowspan和colspan,直接在span-method属性中计算实 ...

随机推荐

  1. UML建模综述

    一.概念 UML-Unified Model Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言.作为一个支持模型化和软件系统开发的图形化语言,UML为软件 ...

  2. Android操作外置SD卡和U盘相关文章

    Android设备与外接U盘实现数据读取操作https://blog.csdn.net/true100/article/details/77775700 usbdisklibhttps://githu ...

  3. 省份-城市-区域三级联动【struts2 + ajax +非数据库版】

    package loaderman; /** * 实体,封装省份和城市 */ public class Bean { private String province;//省份 private Stri ...

  4. plantuml语法

    活动图(新语法) 当前活动图(activity diagram)的语法有诸多限制和缺点,比如代码难以维护. 所以从V7947开始提出一种全新的.更好的语法格式和软件实现供用户使用(beta版). 就像 ...

  5. 关于XMind软件文件格式的一些思考

    1,安装XMind软件,看见可以导入Markdown文件 2,因此新建了测试.md文件,代码格式为左图,显示效果为右图. 3,导入到XMind中显示为下图 4,也就是XMind中子标题对应着Markd ...

  6. DISCUZ论坛各大功能模块入口文件介绍

    index.php 首页入口文件,这个文件相信大家都不陌生,小编就不具体介绍了. forum.php 论坛入口文件 portal.php 门户入口文件 group.php 群组入口文件 home.ph ...

  7. linux文本处理三剑客命令及用法

    grep:文本过滤工具 功能说明: sed :字符流编辑器 功能说明: awk :

  8. SGI STL内存管理

    前言 万丈高楼平地起,内存管理在C++领域里扮演着举足轻重的作用.对于SGI STL这么重量级的作品,当然少不了内存管理的实现.同时,想要从深层次理解SGI STL的原理,必须先将内存管理这部分的内容 ...

  9. Linux下的I/O复用与epoll详解(转载)

    Linux下的I/O复用与epoll详解 转载自:https://www.cnblogs.com/lojunren/p/3856290.html  前言 I/O多路复用有很多种实现.在linux上,2 ...

  10. Windows 下部署 hadoop spark环境

    一.先在本地安装jdk 我这里安装的jdk1.8,具体的安装过程这里不作赘述 二.部署安装maven 下载maven安装包,并解压 设置环境变量,MAVEN_HOME=D:\SoftWare\Mave ...