iview 如何在表格中给操作图标添加Tooltip文字提示?
项目需要用到的iview 表格中操作项目有各种各样的图标,而各种各样的图标代表不同的操作,面对新用户可能很懵,那如何给这些图标添加Tooltip文字提示?
废话不多讲,直接看代码:
<template>
<Table :columns="columns" :data="data"></Table>
</template>
<script>
export default {
data () {
return {
columns: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: '操作',
key: 'action',
render: (h, { row }) => {
return h('div', [
h('Tooltip', {
props: {
placement: 'top',
transfer: 'true',
content: '提示文字内容'
}
}, [
h('Icon', {
props: {
// custom: 'icon-seewrap' //自定义图标
type: 'md-add',
size: '28'
},
on: {
click: () => {
// 添加
alert("添加")
}
}
})
])
])
}
}
],
data: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
}
]
}
}
}
</script>
iview 如何在表格中给操作图标添加Tooltip文字提示?的更多相关文章
- 在element-ui的表格组件中为表头添加Tooltip 文字提示
在使用表格组件的时候经常遇到的问题,列数很多,而表头的文字描述长度很长 <el-table-column v-if="!column.event" v-for="( ...
- Mac OS X中Launchpad的图标添加删除方法(添加方法别试了,和Linux很大区别)
说明:在Mac下的Launchpad图标添加和删除都与应用程序的app文件有关,如果单纯的只想在Launchpad添加自定义的图标,然后指定要某条命令运行时,建议不要这么干,Launchpad的图标管 ...
- vue中,svg图标添加click事件,部分浏览器不生效
vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...
- Excel表格中无法中间插入新行列! 提示:在当前工作表的最后一行或列中,存在非空单元格,解决方案
excel中新增行列时报错: 提示:在当前工作表的最后一行或列中,存在非空单元格,所以无法插入新行或新列.
- Extjs 在Grid单元中格添加Tooltip提示
Grid 中的单元格添加Tooltip 的效果 Ext.QuickTips.init(); //必须要… columns: [ { text: 'Name', dataIndex: 'name' }, ...
- MFC中添加ToolTip提示框
PART 1 MFC 对话框中的 Buttton添加提示 例如我们想在一个对话框中的一个button控件添加tooltip,实现的方法如下: 1. 在该对话框的类中添加一个CToolTipCtrl类型 ...
- 使用 iview Table 表格组件修改操作的显示隐藏
使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...
- Oracle 远程访问配置 在 Windows Forms 和 WPF 应用中使用 FontAwesome 图标 C#反序列化XML异常:在 XML文档(0, 0)中有一个错误“缺少根元素” C#[Win32&WinCE&WM]应用程序只能运行一个实例:MutexHelper Decimal类型截取保留N位小数向上取, Decimal类型截取保留N位小数并且不进行四舍五入操作
Oracle 远程访问配置 服务端配置 如果不想自己写,可以通过 Net Manager 来配置. 以下配置文件中的 localhost 改为 ip 地址,否则,远程不能访问. 1.网络监听配置 ...
- java使用poi操作word, 支持动态的行(一个占位符插入多条)和表格中动态行, 支持图片
依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifa ...
随机推荐
- vscode自动生成文件头部注释和函数注释
参考链接:https://blog.csdn.net/sueRimn/article/details/88048276
- 一次记录 java非web项目部署到linux
1.生成可执行jar 运行提示没有主清单属性 一番查找原因:是因为将项目生成jar包的时候,生成的MANIFEST.MF没有MAIN-CLASS,这里加上就可以了,后面的是项目启动类的完整类名 当然还 ...
- 第35课.函数对象分析("()"重载)
1.编写一个函数 a.函数可以获得斐波那契数列 b.每调一次返回一个值 c.函数可以根据需要重复使用 2.函数数对象 a.使用具体的类对象取代函数 b.改类的对象具备函数调用的行为 c.构造函数指具体 ...
- js延迟2秒执行事件
有时候,我们在做修改回显数据时,就需要默认触发一些事件,但是由于数据没有很快从服务器中取回,所以就有延迟执行js事件 setTimeout(function () { // 这里就是处理的事件 }, ...
- 在UPW中使用VLC解码媒体
VLC支持的格式很全,学会如何使用后,完全可以自己给自己写一个简单的万能播放器了. 源码来自github:https://github.com/kakone/VLC.MediaElement.git( ...
- notepad++一次多行复制粘贴到对应位置
NodePad++一次复制多行粘贴到对应位置 有时候要写sql,但是里面有很多字段要对应上,如果要自己一个字段一个字段的去写是在有点麻烦,是不是有更好的方法做到这件事呢? 要做这件事,首先分析下我们已 ...
- swiper手滑动轮播图后自动轮播失效解决办法
设置autoplay:true之后,再设置 autoplay:{disableOnInteraction: false} --------------------------------------- ...
- Django ORM相关的一些操作
一般操作 看专业的官网文档,做专业的程序员! 必知必会13条 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 ...
- 牛客 72C 小H和游戏 (动态点分治)
大意: 给定树, 每个点初始权值0, 每次询问给出$x$, $x$权值+1, 求距离$x$不超过2的权值和. 这题数据范围过大, 动态点分治卡不过去, 考虑其他做法 考虑每次只加范围$1$, c[0] ...
- windows下将jar包打入maven仓库
mvn install:install-file -DgroupId=org.csource -DartifactId=fastdfs-client-java -Dversion=1.27 -Dpac ...