项目需要用到的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文字提示?的更多相关文章

  1. 在element-ui的表格组件中为表头添加Tooltip 文字提示

    在使用表格组件的时候经常遇到的问题,列数很多,而表头的文字描述长度很长 <el-table-column v-if="!column.event" v-for="( ...

  2. Mac OS X中Launchpad的图标添加删除方法(添加方法别试了,和Linux很大区别)

    说明:在Mac下的Launchpad图标添加和删除都与应用程序的app文件有关,如果单纯的只想在Launchpad添加自定义的图标,然后指定要某条命令运行时,建议不要这么干,Launchpad的图标管 ...

  3. vue中,svg图标添加click事件,部分浏览器不生效

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  4. Excel表格中无法中间插入新行列! 提示:在当前工作表的最后一行或列中,存在非空单元格,解决方案

    excel中新增行列时报错: 提示:在当前工作表的最后一行或列中,存在非空单元格,所以无法插入新行或新列.

  5. Extjs 在Grid单元中格添加Tooltip提示

    Grid 中的单元格添加Tooltip 的效果 Ext.QuickTips.init(); //必须要… columns: [ { text: 'Name', dataIndex: 'name' }, ...

  6. MFC中添加ToolTip提示框

    PART 1 MFC 对话框中的 Buttton添加提示 例如我们想在一个对话框中的一个button控件添加tooltip,实现的方法如下: 1. 在该对话框的类中添加一个CToolTipCtrl类型 ...

  7. 使用 iview Table 表格组件修改操作的显示隐藏

    使用 iview Table 表格组件修改操作的显示隐藏,如下图 1.如何设置 table 操作按后台传入的状态值去渲染 不同的按钮? 解决方法 我们在vue2中,动态渲染html 使用的是 retu ...

  8. 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.网络监听配置 ...

  9. java使用poi操作word, 支持动态的行(一个占位符插入多条)和表格中动态行, 支持图片

    依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifa ...

随机推荐

  1. Linux中移动,复制,删除,打包排除某个目录或文件

    移动,复制,删除排除某个文件或目录 cp !(file1|dir2) /data/ 复制文件到/data/,排除file1和dir2 mv !(file1|dir2) /data/ 移动文件到/dat ...

  2. CentOS7.3安装Python3.6

    安装python3.6可能使用的依赖 # yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sql ...

  3. Python基础总结之第十天开始【认识模块、包和库】(新手可相互督促)

    每天都有一种备课的赶脚~~~ 什么是模块? 在实际的开发过程中,代码量肯定有成千上万行的代码,甚至十几万行代码也很正常吧... 那么这么多的代码如果放在一个文件中,肯定是很不合适的,为了以后程序的编写 ...

  4. 《你必须知道的495个C语言问题》读书笔记之第11-14章:ANSI C标准、库函数、浮点数

    一.ANSI C标准 1. ANSI向C语言预处理器引入了几项新的功能,包括“字符串化”操作符(#).“符号粘贴”操作符(##).#pragma指令. 2. Q:char a[3] = "a ...

  5. centos7yum的配置

    首先呢,本人的centos的版本是7.5 这里我主要介绍的是通过挂在系统镜像文件和指定网络epel镜像源. 首先指定本地的光盘当做yum的仓库 1.删除/etc/yum.repos.d的所有文件 2. ...

  6. kettle下载地址

    kettle 4.4和4.2 版本是好的,版本6.6和8.2 版本有bug Kettle下载和安装: 1.官网各个版本下载地址:https://sourceforge.net/projects/pen ...

  7. 高深的dp POJ 2229Sumsets

    对于这个问题, 我们显然可以看出来, 当他是奇数的时候, 直接等于他的前一个偶数 dp [ i ] = dp [ i - 1] ; 那么问题, 当它是偶数的时候, 我们应该怎么进行 dp 记忆化搜索并 ...

  8. python3.5+installer 将.py 打包成.exe

    (1)下载安装installer,不如我安装在D:\Program Files\Python35,安装完成后,在D:\Program Files\Python35\Scripts可以找到install ...

  9. 基于DNS(Consul)高可用

    DNS 推荐从Bind-DLZ入手,资料多可控制度更好(查询DNS记录SQL可定制)据说性能差 Bind-DLZhttps://www.cnblogs.com/saneri/p/8178065.htm ...

  10. hdu 2189还是dp..

    题目的意思比较简单,类似计数dp. 一开始我想让dp[i]+=dp[i-prime] 每次遍历比i小的所有素数,然后发现有重叠的 比如 2+3 3+2 就导致错误.看了其他人的填充方式,发现定下pri ...