首页 > 其他 > 详细

iview 如何在表格中给操作图标添加Tooltip文字提示?

时间:2019-06-02 12:04:12      阅读:1617      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/changxue/p/10961948.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!