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属性中计算实 ...
随机推荐
- k8s-helm02-----helm常用命令
查看在存储库中可用的所有 Helm charts helm search helm status 查询一个特定的 Release 的状态. helm status XXX
- [Python]正则匹配字符串 | 蒲公英二维码图片url
代码示例: import re def Find(string): # findall() 查找匹配正则表达式的字符串 url = re.findall('http[s]?://(?:[a-zA-Z] ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_6-1.常用的第三方支付和聚合支付介绍
笔记 第六章 开发在线教育视频站点核心业务之从零基础接入 微信扫一扫网页支付 1.常用的第三方支付和聚合支付介绍 简介:介绍常用的第三方支付和聚合支付 1.什么是第三方支付 第 ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_3-07 Eureka服务注册中心配置控制台问题处理
笔记 7.Eureka服务注册中心配置控制台问题处理 简介:讲解服务注册中心管理后台,(后续还会细讲) 问题:eureka管理后台出现一串红色字体:是警告,说明有服务上线率低 EMERGENC ...
- k8s集群部署(3)
一.利用ansible部署kubernetes集群环境准备 基于二进制方式部署和利用ansible-playbook实现自动化:既提供一键安装脚本,也可以分步执行安装各个组件,同时讲解每一步主要参数配 ...
- 搭建Kubernetes容器集群管理系统
1.Kubernetes 概述 Kubernetes 是 Google 开源的容器集群管理系统,基于 Docker 构建一个容器的调度服务,提供资源调度.均衡容灾.服务注册.劢态扩缩容等功能套件. 基 ...
- Java集合(7):散列与散列码
散列的价值在于速度.我们使用数组来保存键的信息,这个信息并不是键本身,而是通过键对象生成一个数字(散列码),作为数组下标.由于数组的容量是固定的,而散列容器的大小是可变的,所以不同的键可以产生相同的数 ...
- dozer转化对象
依赖: commons-beanutils-1.9.3.jar.commons-lang-2.6.jar.dozer-5.3.2.jar.jcl-over-slf4j-1.7.25.jar.slf4j ...
- 【FIORI系列】SAP 一文读懂SAP Fiori是什么
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP 一文读懂SAP Fio ...
- ASP.NET Core 入门笔记10,ASP.NET Core 中间件(Middleware)入门
一.前言 1.本教程主要内容 ASP.NET Core 中间件介绍 通过自定义 ASP.NET Core 中间件实现请求验签 2.本教程环境信息 软件/环境 说明 操作系统 Windows 10 SD ...