element-ui table 给表头添加icon,以及hover上去的提示文字

element-ui table 给表头添加icon,以及hover上去的提示文字

 

 

 

 html部分

<el-table-column prop="" show-overflow-tooltip label="待发放奖品项数" :render-header="icons" align="center" ></el-table-column> //设置icon 将会用到 render-header

js部分

复制代码
methods: {
      icons(h,{column}){
        const inReview = '需要进行线下发放的奖品项数(非奖品数),例如,一个中奖项设置奖品A一次中奖数量为2,一共有10人中奖待发放,那次数展示的数量为10,而不是20。已发放奖品项目同理。自动线上发放的虚拟物品不会占用“待发放奖品项数”'
        const inReviews = '需要进行线下发放的奖品项数(非奖品数),例如,一个中奖项设置奖品A一次中奖数量为2,一共有10人中奖待发放,那次数展示的数量为10,而不是20。已发放奖品项目同理。自动线上发放的虚拟物品不会占用“待发放奖品项数”'
        return h(
        'div', [
                h('span', column.label),
                h('el-tooltip', {
                    props: {
                        placement: 'top'
                    }
                }, [
                    h('div', {
                        slot: 'content',
                        style: {
                            'width':'250px',
                            whiteSpace: 'normal',
                            'margin-bottom': '10px'
                        }
                    }, inReview),
                    h('div', {
                        slot: 'content',
                        style: {
                            'width':'250px',
                            whiteSpace: 'normal',
                            'margin-bottom': '10px'
                        }
                    }, inReviews),
                    h('i', {
                        class: 'el-icon-warning-outline',
                        style: 'color:red;margin-left:5px;'
                    })
                ],)
            ]
     )
      }
}
复制代码
posted @   龙卷风吹毁停车场  阅读(5616)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
点击右上角即可分享
微信分享提示