项目需要用到的iview 表格中操作项目有各种各样的图标,而各种各样的图标代表不同的操作,面对新用户可能很懵,那如何给这些图标添加Tooltip文字提示?

废话不多讲,直接看代码:

  1. <template>
  2. <Table :columns="columns" :data="data"></Table>
  3. </template>
  4. <script>
  5. export default {
  6. data () {
  7. return {
  8. columns: [
  9. {
  10. title: 'Name',
  11. key: 'name'
  12. },
  13. {
  14. title: 'Age',
  15. key: 'age'
  16. },
  17. {
  18. title: 'Address',
  19. key: 'address'
  20. },
  21. {
  22. title: '操作',
  23. key: 'action',
  24. render: (h, { row }) => {
  25. return h('div', [
  26. h('Tooltip', {
  27. props: {
  28. placement: 'top',
  29. transfer: 'true',
  30. content: '提示文字内容'
  31. }
  32. }, [
  33. h('Icon', {
  34. props: {
  35. // custom: 'icon-seewrap' //自定义图标
  36. type: 'md-add',
  37. size: '28'
  38. },
  39. on: {
  40. click: () => {
  41. // 添加
  42. alert("添加")
  43. }
  44. }
  45. })
  46. ])
  47. ])
  48. }
  49. }
  50. ],
  51. data: [
  52. {
  53. name: 'John Brown',
  54. age: 18,
  55. address: 'New York No. 1 Lake Park',
  56. date: '2016-10-03'
  57. },
  58. {
  59. name: 'Jim Green',
  60. age: 24,
  61. address: 'London No. 1 Lake Park',
  62. date: '2016-10-01'
  63. }
  64. ]
  65. }
  66. }
  67. }
  68. </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. 【AMAD】django-channels -- 为Django带来异步开发

    动机 简介 个人评分 动机 目前web生态的发展带来了很多异步特性,比如websocket.而原生Django并不支持. 简介 django-channels1为Django带来了Websocket, ...

  2. 【AMAD】django-taggit -- 一个简单的,通用的django tagging模块

    简介 个人评分 简介 django-taggit1是一个通用的,易用的标签系统. from django.db import models from taggit.managers import Ta ...

  3. Git速成学习第五课:分支管理策略

    Git速成学习笔记整理于廖雪峰老师的官网网站:https://www.liaoxuefeng.com/ 通常合并分支时,如果可能用Fast forward模式,但是在这种模式下,删除分支后,会丢掉分支 ...

  4. mfc中循环显示图片

    UINT CPalmIdentDlg::UpdateCImg(LPVOID p) { struct params *pa = (struct params*)p; int *imgarray = pa ...

  5. C#开发者必须知道的13件事情

    1.开发流程 程序的Bug与瑕疵往往出现于开发流程当中.只要对工具善加利用,就有助于在你发布程序之前便将问题发现,或避开这些问题. 标准化代码书写 标准化代码书写可以使代码更加易于维护,尤其是在代码由 ...

  6. std::unique_lock与std::lock_guard分析

    背景 C++多线程编程中通常会对共享的数据进行写保护,以防止多线程在对共享数据成员进行读写时造成资源争抢,导致程序出现未定义或异常行为.通常的做法是在修改共享数据成员时进行加锁(mutex).在使用锁 ...

  7. UWP笔记-自定义Grid背景图片

    之前写简单的UWP版本地音乐播放器,有自定义背景壁纸的功能,现在贴在这里回顾下. Page.xaml 页面,添加Grid <Grid x:Name="mainGrid"/&g ...

  8. 如何克服社交恐惧症?zz

    zhang Bavol 清华大学核能与新能源技术研究院——核科学与技术/电子爱好者     你说的这个恐惧症我也有一点点,不过现在我是只对那种不是很熟悉的七姑八婆之类的亲戚才会有这种憋屈感觉,对朋友和 ...

  9. SQL SERVER创建表

    创建表 create table table_name ( column_name_1 data_type, column_name_2 data_type NOT NULL, column_name ...

  10. Java静态代理与动态代理实现

    一.什么是代理 代理是一种设计模式,它提供了一种通过代理访问目标对象的方式.在应用代理之前,我们调用对象的过程如下: 客户端直接调用对象并获取返回值.而应用了代理之后,我们调用对象的过程变成如下: 客 ...