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属性中计算实 ...
随机推荐
- C++ STL——C++容器的共性和相关概念
目录 一 STL容器共性机制 二 STL容器的使用场合 三 函数对象 四 谓词 五 内建函数对象 六 函数对象适配器 注:原创不易,转载请务必注明原作者和出处,感谢支持! 注:内容来自某培训课程,不一 ...
- 从数组中找出所有组合为s的数
java版本 package numCombine; /** * 从数组中找出所有组合为s的数 * @author root * */ public class NumComberAll { publ ...
- 前端js数据加密解密
一.最简单的加密解密 函数escape()和unescape(); 二.base64加密 (1)introduction base64是网络上最常见的用于传输8bit字节码的编码方式之一,base ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_5-07 断路器dashboard监控仪表
笔记 7.断路器Dashboard监控仪表盘实战 简介:讲解断路器Dashboard基础使用和查看 1.加入依赖 <dependency> ...
- linux备忘和卸载
linux上网 -------------------------------------------------linux卸载------------------------------------ ...
- idea设置背景色和字体大小
修改背景色 点击[File],选择[Settings]. 点击[Editor],选择[color Scheme]. 默认Scheme只有两种.Default是白色,Darcula是黑色 修改字体 ...
- Vue 使用eventBus 实现兄弟组件间的通信
实现方式: 主要是在相互通信的兄弟组件之中,都引入一个新的vue实例,然后通过分别调用这个实例的事件触发事件广播 和监听来实现通信和参数传递. 需求: a页面tree的增删改后,数据还是之前的老数据 ...
- lamp的动静分离部署
一.lamp分离部署工作图 二.LAMP的安装与配置 1.环境准备 2.对 PHP 服务器进行部署 #以下为安装PHP及其依赖 [root@php ~ ]# .tar.gz -C /usr/src [ ...
- java发送邮件(一)--补充添加附件
今天来记录一下如何使用java来发送邮件 背景 之前项目有个需求,当产品出现故障时会把情况上送给服务器,服务器发送邮件将故障产品的位置以及故障信息等告知维修人员.发送邮件的接口不是我负责的,但是有兴趣 ...
- City Road
题目描述 从前有一个叫做”H湖”的地方,”H湖”的居民生活在不同的小岛上,当他们想去其他的小岛时都要通过划小船或者小岛之间的桥来实现.现在政府想实现”H湖”的全畅通!(不一定有直接的桥相连,只要互相间 ...