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 ...
随机推荐
- 《剑指offer》字符串专题 (牛客11.01)
字符串的题目难度不一,涉及到的考点有字符串处理.字符串匹配(自动机.正则).模拟,以及递归.动态规划等算法. 难度 题目 知识点 ☆ 02. 替换空格 从后往前 ☆☆ 27. 字符串的排列 回溯,St ...
- 如何通过Exchange2010 OWA更改过期密码
很多Exchange 2003管理员都通过IISADMPWD虚拟目录为员工提供用户密码修改功能,这大大方便了移动用户和非加入域用户在密码到期时的更改操作.您也许已经注意到:Windows Server ...
- 33.TCP协议概念/scapy模块doos攻击
TCP协议概念/scapy模块: 1,TCP/IP四层协议: 2,TCP数据包的构成: TCP FLAGS:TCP数据包标志位 U:URG,紧急比特 A:ACK,确认比特 P:PSH,推送比特 S:S ...
- ssh出现公钥错误问题的解决方法
问题:主机app1推送公钥时,公钥判定错误 原因:之前推过公钥,用的是ip而不是主机名(即hosts文件中的对应关系不对),导致app1的~/.ssh/known_hosts中的公钥对不上. ...
- Cent7.2单用户模式
1. 在进入系统时选择内核启动. 2. 按'e'进入编辑模式,找到带有内核的那一行. 3. 将ro(read only)改为rw init=/sysboot/bin/sh. 4. 按下ctrl+x ...
- poj1797(dijstra变形,求最小边的最大值)
题目链接:https://vjudge.net/problem/POJ-1797 题意:n个点,m条带权边,求点1到点n的所有路径中最小边的最大值. 思路: 和poj2253一样,只不过那题n< ...
- vue-router 在微信浏览器中操作history URl未改变的解决方案
在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...
- 【AtCoder】AGC001
AGC001 A - BBQ Easy 从第\(2n - 1\)个隔一个加一下加到1即可 #include <bits/stdc++.h> #define fi first #define ...
- Python 运算符与数据类型
Python 的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承.Py ...
- Elastic Search快速上手(3):搜索
前言 存储好数据之后,便可通过RESTful API进行搜索. 详细文档可参考: --简单搜索https://www.elastic.co/guide/cn/elasticsearch/guide/c ...