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 ...
随机推荐
- C++结构体基础知识
结构体 一.什么是结构体 假设我们要存储有关篮球运动员的信息,则可能存储Ta的姓名.工资.身高.体重.平均得分等,希望有一种数据格式可以将这些信息存放在一个单元中. 因此引入了结构的概念 结构是用户定 ...
- Windows下直接双击可执行的jar
如果没有设置,那么就是用命令行: jar处在文件夹路径下打开命令行:java -jar xxx.jar 总的来说是有点不方便 首先默认打开jar程序得是相同jdk的java.exe 然后是一闪而过 下 ...
- fastadmin添加定时任务
安装定时任务插件后 需要在crontab -e 中添加一条记录 * * * * * /usr/bin/php /var/www/yoursitepath/public/index.php /addon ...
- Nginx 小入门记录 之 初识Nginx和环境准备(一)
前置知识准备: 如果还不知道服务器是干什么的,只是刚踏入程序员之路的,大家还是先学习基础,虽然以下文档很简单,但至少知道为什么要学: 一般服务器环境现在基本上都是放在Linux系统上了,如果对Linu ...
- JavaSE基础(七)--Java流程控制语句之switch case 语句
Java switch case 语句 switch case 语句判断一个变量与一系列值中某个值是否相等,每个值称为一个分支. 语法 switch case 语句语法格式如下: switch(exp ...
- 性能工具之JMeter+InfluxDB+Grafana打造压测可视化实时监控(centos7环境)
前提条件,已经安装jmeter并可以运行 1.安装influxdata wget et https://dl.influxdata.com/influxdb/releases/influxdb-1.7 ...
- Java学习总结一 数据类型
@Java300 学习总结 一.Java 基本数据类型分类如下: 整型变量:byte.short.int.long 浮点型变量:float.double 字符型变量:char 布尔型变量:boolea ...
- DevExpress WPF控件记录
以下是博主用到DevExpress WPF控件时的一些记录笔记: 1.Canvas控件:Canvas控件的背景色一定要设置(background="Transparent"),不然 ...
- 【AC自动机】洛谷三道模板题
[题目链接] https://www.luogu.org/problem/P3808 [题意] 给定n个模式串和1个文本串,求有多少个模式串在文本串里出现过. [题解] 不再介绍基础知识了,就是裸的模 ...
- Codeforces 1189F. Array Beauty
传送门 首先可以注意到序列里面元素的顺序对答案是没有影响的,所以二话不说先排序再看看怎么搞 考虑枚举每种子序列可能产生的贡献并算一下产生这个贡献的子序列有多少 考虑设 $F(x)$ 表示选择的元素差值 ...