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 ...
随机推荐
- 【VS开发】#pragma预处理命令
#pragma预处理命令 #pragma可以说是C++中最复杂的预处理指令了,下面是最常用的几个#pragma指令: #pragma comment(lib,"XXX.lib") ...
- JS节流和防抖的区分和实现详解
参考链接:http://caibaojian.com/throttle-debounce.html
- visualgdb 调试arm
目录 visualgdb 调试arm 没有ssh的开发板使用telnet 使用telent的gdbserver title: visualgdb 调试arm date: 2019/11/19 10:0 ...
- vue操作数组时遇到的坑
用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法: 括号里写需要加入的元素 ...
- mysql导入问题
今天在导入数据库的时候,发现此问题: 后来一查,是因为GTID_EXECUTED有值,而导出的文件中包含了SET @@GLOBAL.GTID_PURGED的操作,所以导入报错. 我们有两种方法解决 ...
- [转] zookeeper 本地启动多节点
1. zoo.cfg配置文件如下: # The number of milliseconds of each tick tickTime=2000 # The number of ticks that ...
- extra bytes at beginning or within zipfile
主要用文本文档打开看看是否带有#!/bin/bash 修改pom文件<executable>false</executable>
- Payload 实现分离免杀
众所周知,目前的杀毒软件的杀毒原理主要有三种方式,一种基于特征,一种基于行为,一种基于云查杀,其中云查杀的一些特点基本上也可以概括为特征码查杀,不管是哪一种杀毒软件,都会检查PE文件头,尤其是当后门程 ...
- 简单分析BeanPostProcessor
1. 什么是BeanPostProcessorBeanPostProcessor是一个接口,有两个方法,分别是:Object postProcessBeforeInitialization(Objec ...
- @Html.ActionLink方法
Html.ActionLink:MVC提供的自动构造重写地址的方法,该方法有五个重载 1.Html.ActionLink("linkText","actionName&q ...