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>
    

      

  • 相关阅读:
    golang linux安装
    vscode 插件
    windows访问eks pods
    go mod包管理
    beego创建项目
    Atcoder ARC-125
    AtCoder AGC003 简要题解
    Python 字符串转成变量名
    13_Go基础(binary)
    12_Go基础(iota)
  • 原文地址:https://www.cnblogs.com/changxue/p/10961948.html
Copyright © 2011-2022 走看看