zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    计算某一日期是在一年中第几周
    动态生成web表-asp.net table
    sql server 小技巧(7) 导出完整sql server 数据库成一个sql文件,包含表结构及数据
    循环取月的三位英语名 Jan Feb
    Python面向对象编程
    算法
    UDP Sockets in C#
    C++ 11
    GNU Make
    C++ 11
  • 原文地址:https://www.cnblogs.com/changxue/p/10961948.html
Copyright © 2011-2022 走看看