iview 表格中表头显示Tooltip文字提示方法

分享一下实际项目中iview表格表头的显示tooltip文字提示,实际效果如下

 <script>中加入:

import { resolveComponent } from 'vue';

 columns中加入:

{

                        title: "最大可用量",

                        key: "maxFillInNum",

                        resizable: true,

                        minWidth: 130,

                        renderHeader: (h, params) => {

                            return h('div',

                                     [

                                         h('span',  {

                                             style: {

                                                 marginTop: '5px'

                                             }

                                         },'最大可用量'),

                                         h(resolveComponent('Tooltip'), {

                                             content: "最大可用量=min(合同内物资可用数量,年度需求计划剩余可用数量)",

                                             placement: "top",

                                             transfer: true,

                                             style: {

                                                 marginBottom: '5px'

                                             },

                                         }, [

                                             h(resolveComponent('Icon'), {

                                                 type: "md-help",

                                             }),

                                   

                                         ])

                                     ])

                        }

                    },

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值