IView 使用Table组件时实现给某一列添加click事件
通过给 columns 数据的项,设置一个函数 render,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数。
render 函数传入两个参数,第一个是 h,第二个是对象,包含 row、column 和 index,分别指当前单元格数据,当前列数据,当前是第几行。

代码:
render: (h, params) => {
//return h('定义的元素',{'元素的性质'},'元素的内容');
let url = '访问的地址'
return h('a', {
attrs: {
href: url,
target: '_black'
}
}, params.row.address);
}

了解 render 函数传入的两个参数官网详细地址:https://www.iviewui.com/components/table
IView 使用Table组件时实现给某一列添加click事件的更多相关文章
- iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件
这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该 ...
- iview修改table组件实现循环向上滚屏
前提,最近项目中需要实现table的滚屏效果,并且使用的是iview的table组件,踩坑,填坑如下. 1.首先找到Table组件中的table,就是这个class:ivu-table-body te ...
- 使用vxe table组件时,edit-render配置$select',选中option后关闭cell的激活状态,显示选中option的value问题
在我的项目中使用vxe table组件时,edit-render配置{name: '$select', options: [{label:"脉搏",value:"maib ...
- 使用element-ui的table组件时,渲染为html格式
背景 今天在做vue的项目时,使用到 element-ui 的 table 组件,使用富文本编辑器进行新增操作后,发现 html格式 并没有被识别 原因 在 element-ui 中,table组件默 ...
- 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现
[背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...
- 【Vue】IView之table组件化学习(二)
最基本的绑定table是这样的,需要columns和data两个属性. <template> <Card> <h4>表格栗子</h4> <Tabl ...
- iview 的table组件,自带过滤功能
html : <Table :columns="people" :data="scores"></Table> data: people ...
- 移除 iview的Table组件固定两头后box-shadow阴影效果
.ivu-table-fixed{ box-shadow:0 0 0 #fff; }
- Iview 在Table组件中添加图片
要先简单了解render函数的使用. 直接上代码: { title: "商品图片", key: "commodityPhoto", align: 'center ...
随机推荐
- 大觅网02Day
docker环境搭建:(注:请先完成上一次的环境搭建) A.部署环境(导入上次系统的时候修改虚拟机的内存) 1.安装系统自带版本Docker:apt-get install docker.io 2.查 ...
- Linux C/C++基础 文件(中)
1.ubuntu cat命令的实现 cat——查看或者合并文件内容 #include<stdio.h> int main(int argc,char* argv[]) { //1.打开文件 ...
- 2 基于梯度的攻击——PGD
PGD攻击原论文地址——https://arxiv.org/pdf/1706.06083.pdf 1.PGD攻击的原理 PGD(Project Gradient Descent)攻击是一种迭代攻击,可 ...
- selenium-server--chromedriver环境
x 准备环境: 1.selenium-server-standalone-3.8.1.jar 2.chromedriver.exe 一.查看本地电脑chrome浏览器版本信息: 二.访问代理地址:ht ...
- CDH安装前系统优化准备
参考: https://www.cnblogs.com/yinzhengjie/p/10367447.html https://www.sysit.cn/blog/post/sysit/CDH6.2. ...
- PostgreSQL查看等待锁的SQL和进程
查看等待锁的查询和进程: The following query may be helpful to see what processes are blocking SQL statements (t ...
- 有人向你扔了一个bug,哈哈哈哈
有人向你扔了一个bug. "26楼会议室的灯亮着.它应该是熄灭着的." bug的备注里写道"你应该能在5分钟内搞定,只要按一下开关就好了."你去了26楼的会议室 ...
- 有关最短路上的第k小/大值的总结
1.USACO08JAN Telephone Lines 题面 由于问的是最大值最小,所以二分加验证就好了 比较显然的,题干问的是第k+1长的路最短: 那么二分答案是正确的方向: 但是怎么验证? 我 ...
- <<C++ Primer>> 第 6 章 函数
术语表 第 6 章 函数 二义性调用(ambiguous call): 是一种编译时发生的错误,造成二义性调用的原因时在函数匹配时两个或多个函数提供的匹配一样好,编译器找不到唯一的最佳匹配. 实 ...
- idea 设置自动生成注释
idea新建类注释规则 /** @ProjectName: ${PROJECT_NAME} @Package: ${PACKAGE_NAME} @ClassName: ${NAME} @Descrip ...