今天使用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. C# iis 错误配置信息( CS0016: 未能写入输出文件 )

    IIS发布时,编译器错误消息: CS0016: 未能写入输出文件 "c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.N ...

  2. FastMM 定位内存泄露的代码位置

    FastMM 定位内存泄露的代码位置 开源的FastMM,使用很简单,在工程的第一行引用FastMM4即可(注意,一定要在第一个Uses的位置),可以在调试程序时提示内存泄露情况,还可以生成报告. 在 ...

  3. cocoapod的下载安装解释

    本文不提供cocoapod的下载安装的流程,因为那些只要百度一下就有的东西,而是对里面的代码进行解释,希望对iOS小白安装cocoapod有帮助: 一.cocoapod是什么? 开发过程中,我们会用到 ...

  4. Window环境下 Git 下载Android源码

    1.需要的工具 git.vpn代理 2. 设置git代理(Google source 无法下载,git设置代理) git config --global http.proxy "localh ...

  5. Spring中的工厂模式和单例模式

    Spring预备知识(适合中小型项目) 作用:集成和管理其他框架 工厂模式: A  a  = new A( ); 将类所要创建的对象写入工厂,统一进行管理 package com.spring; pu ...

  6. Objective-C 协议(protocol)

    协议(protocol)是Objective-c中一个非常重要的语言特性,从概念上讲,非常类似于JAVA中接口. 一个协议其实就是一系列有关联的方法的集合(为方便后面叙述,我们把这个协议命名为myPr ...

  7. 14.1.3 检查InnoDB 可用性:

    14.1.3 Checking InnoDB Availability 14.1.3 检查InnoDB 可用性: 确定是否你的server 支持InnoDB: 1.执行命令 SHOW ENGINES; ...

  8. JDK环境变量配置及Tomcat安装服务

    1.测试jdk安装是否成功: 在cmd中输入java -version 2.环境变量: 1)新建系统变量JAVA_HOME,如:D:\Program Files\Java\jdk1.8.0_60 2) ...

  9. Kurskal算法(克鲁斯卡尔算法)

    特点:适用于稀疏图,边比较少的图.如果顶点较少,且为稠密图,则用Prim算法.跟Prim算法的用途相同.时间复杂度为O(e*loge),其中e为边数. 代码: #include <stdio.h ...

  10. java基础 ------- 多重循环 and break与continue

    -----  什么是多重循环 ----   打印数列 public class ForEx { public static void main(String[] args){ for(int i = ...