今天使用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. 数据库 | SQL查询&LIMIT的用法

    body{ text-align:left; width:80%; margin:10px 100px; } 前言 select top n 形式的语句可以获取查询的前几个记录,但是 mysql没有此 ...

  2. RedHat Enterprise7 搭建ISCSI

    IP 主机名 作用 10.45.129.113/24      外网 172.16.1.10/24        内网 rac1 RAC节点1 10.45.129.114/24      外网 172 ...

  3. 小D课堂 - 新版本微服务springcloud+Docker教程_4-04 高级篇幅之服务间调用之负载均衡策略调整实战

    笔记 4.高级篇幅之服务间调用之负载均衡策略调整实战     简介:实战调整默认负载均衡策略实战 自定义负载均衡策略:http://cloud.spring.io/spring-cloud-stati ...

  4. 分布式存储ceph介绍(1)

    一.Ceph简介: Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统.ceph 的统一体现在可以提供文件系统.块存储和对象存储,分布式体现在可以动态扩展.在国内一些公司的云环 ...

  5. STS中MyBatis的基本实现

    本文采用的是<深浅spring boot 2.x>中第5章的例子,用一个接口实现对一个表项的读取. 数据库:mysql下建立user数据库,表名为t_usr 1. 数据源设置 在appli ...

  6. ImportError: libpython3.6m.so.1.0: cannot open shared object file: No such file or directory

    该错误原因是libpython3.6m.so.1.0不存在 解决方案 1.查看/usr/lib/x86_64-linux-gnu/目录下是否存在libpython3.m.so.1.0文件,或者直接全盘 ...

  7. day16 模块导入及环境变量

    """ 今日内容: 1.模块 2.模块的导入 3.环境变量sys.path 4.模块间的相互调用 """ """ ...

  8. Stream系列(十)Count方法使用

    计数器 视频讲解: https://www.bilibili.com/video/av77905733/ EmployeeTestCase.java package com.example.demo; ...

  9. [bzoj1775][Usaco2009 Dec]Vidgame 电视游戏问题_背包dp

    1775: [Usaco2009 Dec]Vidgame 电视游戏问题 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1775 题解: 发 ...

  10. SQL 查看某个表被哪些存储过程或者视图使用

    --查询某个表被哪些视图/存储过程使用(type='P':表示存储过程,type='V':表示视图) SELECT OBJECT_NAME(id) FROM syscomments WHERE id ...