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 ...
随机推荐
- uni-app编译配置
Uni-app 编译配置 <!-- #ifdef H5 --> <view>只在H5编译</view> <!-- #endif --> <!-- ...
- 【Python开发】Python:itertools模块
Python:itertools模块 itertools模块包含创建有效迭代器的函数,可以用各种方式对数据进行循环操作,此模块中的所有函数返回的迭代器都可以与for循环语句以及其他包含迭代器(如生成器 ...
- python 爬虫 urllib模块 反爬虫机制UA
方法: 使用urlencode函数 urllib.request.urlopen() import urllib.request import urllib.parse url = 'https:// ...
- python 爬虫 urllib模块 目录
python 爬虫 urllib模块介绍 python 爬虫 urllib模块 url编码处理 python 爬虫 urllib模块 反爬虫机制UA python 爬虫 urllib模块 发起post ...
- Java小知识----POI事件模式读取Excel 2007
一.知识背景 1.读取excel的方法选择问题 java中读excel中的时间,我们通常用POI去解析,在使用new HSSFWorkbook(NEW FileInputStream(excelFil ...
- 阿里云对象存储OSS
阿里云的产品种类繁多,今天让我们一起来了解下对象存储(Object Storage Service,简称OSS)吧! 什么是对象存储呢? 简单来说,对象存储OSS是阿里云提供的海量.安全和高可靠的云存 ...
- JDK 监控和故障处理工具总结 (转)
出处: JDK 监控和故障处理工具总结 JDK 监控和故障处理工具总结 JDK 命令行工具 jps:查看所有 Java 进程 jstat: 监视虚拟机各种运行状态信息 jinfo: 实时地查看和调整 ...
- Android新版xUtils3工具类相关debug
首先出现问题是 build.gradle中的csayısıom.lidroid.xutils:xutils:2.6.13报错了,所以想到是版本的问题,github上搜了xutils发现有新版xutil ...
- Spring经典高频面试题,原来是长这个样子
Spring经典高频面试题,原来是长这个样子 2019年08月23日 15:01:32 博文视点 阅读数 719 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- Java后端技术面试汇总(第四套)
1.Java基础 • 为什么JVM调优经常会将-Xms和-Xmx参数设置成一样:• Java线程池的核心属性以及处理流程:• Java内存模型,方法区存什么:• CMS垃圾回收过程:• Full GC ...