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属性中计算实 ...
随机推荐
- DataFactory生产手机号码
表中的数据类型是CHAR()类型的,才会出现,如右图的“Build a composite field”的这个功能: 固定部分设置 剩余变化部分设置 操作成功 数据库查询的结果
- 【论文学习】Blind Super-resolution Image Reconstruction Based On Novel Blur Type Identification
机翻 <基于新型模糊类型识别的盲超分辨率图像重建>
- 006-数据结构-树形结构-二叉树、二叉查找树、平衡二叉查找树-AVL树
一.概述 树其实就是不包含回路的连通无向图.树其实是范畴更广的图的特例. 树是一种数据结构,它是由n(n>=1)个有限节点组成一个具有层次关系的集合. 1.1.树的特性: 每个结点有零个或多个子 ...
- mybaits及mybaits generator 插件使用指南(亲测原创)
一. eclips安装mybaits插件 参考文章:http://www.cnblogs.com/zengsong-restService/archive/2013/08/09/3248245.htm ...
- js图片预览带进度条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [ML] Machine Learning in the Common Infrastructure ecosystem
一.CogNet架构 下图,可见Kafka的作用. Partial code: Machine Learning in the Common Infrastructure ecosystem Rele ...
- delphi数据集查找不定位
procedure TForm1.Button2Click(Sender: TObject); var R: Variant; begin R := MemTableEh1.Lookup('Name' ...
- v-for产生的列表,实现active的切换
v-for生成序列 <ul> <li v-for="(info,index) in list" :key="info.id" @click=& ...
- 【CSS】聊一聊css的选择器
对于css来说,他的基本语法就是 选择器 { K:V; K:V; K:V } 所以css的学习就分为两个部分: * 1 选择器 ...
- mysql主主、mysql-proxy读写分离、keepalived高可用完美组合
配置mysql主主复制 服务器A:172.16.100.9 服务器B:172.16.100.10 首先在服务器A和服务器B上各安装好单机版mysql5.7,安装好后,再继续下面的操作. 在服务器A和服 ...