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 ...
随机推荐
- 【HANA系列】【第二篇】SAP HANA XS使用JavaScript编程详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列][第二篇]SAP HANA XS ...
- Tensorflow实战第十课(RNN MNIST分类)
设置RNN的参数 我们本节采用RNN来进行分类的训练(classifiction).会继续使用手写数据集MNIST. 让RNN从每张图片的第一行像素读到最后一行,然后进行分类判断.接下来我们导入MNI ...
- 【Python开发】使用python中的matplotlib进行绘图分析数据
matplotlib 是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中. 它的文档相当完备, ...
- [转帖]How does a CPU work?
How does a CPU work? https://milapneupane.com.np/2019/07/06/how-does-a-cpu-work/ CPU, also known as ...
- Linux系统下部署Tomcat服务器
详细步骤如下: 1.下载xshell5和xftp5并安装,登录连接服务器,新建会话窗口: 2.安装配置JDK1.8,具体操作方法如下: (1)下载JDK地址:http://www.oracle.com ...
- P4942小凯的数字
给定一个序列,如12345 56789 1011121314等,输出对其取余9的结果. 那么我们需要明白一个定理,一个序列对一个数的取余结果等于它各位之和取余那个数的结果.证明似乎是这样∑i=0na ...
- 双指针(最大删除子串)Codeforces Round #579 (Div. 3)--Remove the Substring (hard version)
题目链接:https://codeforces.com/contest/1203/problem/D2 题意: 给你S串.T串,问你最长删除多长的子串使得S串里仍然有T的子序列. 思路: 想了好久,先 ...
- Erasing Substrings CodeForces - 938F (字符串dp)
大意: 给定字符串$s$, 长度为$n$, 取$k=\lfloor log2(n)\rfloor$, 第$i$次操作删除一个长度为$2^{i-1}$的子串, 求一种方案使得, $k$次操作后$s$的字 ...
- java对象的几种创建过程
java对象的创建过程 (1)用new 语句创建对象,这是最常用的创建对象方法. 下面用一个简单的存在继承关系的实例的创建,来叙述对象创建过程中的细节 概括如下: 执行顺序:(优先级从高到低.)静态代 ...
- axios与ajax的区别及优缺点
区别:axios是通过Promise实现对ajax技术的一种封装,就像jquery对ajax的封装一样,简单来说就是ajax技术实现了局部数据的刷新,axios实现了对ajax的封装,axios有的a ...