表头加字体图标hover显示信息 vue

vaelcy
1,681 阅读1分钟

这是我参与8月更文挑战的第10天，活动详情查看：  8月更文挑战

学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~
如果大家喜欢，可以点赞或留言💕~~~~，谢谢大家⭐️⭐️⭐️~~~ 文章是针对需求当表格每个表头的字体图标鼠标放上去悬停展示不同的信息时的处理方法，本文使用的是vue框架+element ui，下面图中我对：render-header="icons"画了红框，这里注意在需要添加 icon 的地方要绑定:render-header="icons"，具体的提示信息效果样式就可以在这里进行等修改，最下面的截图有后台所给的数据格式，和前端最后对数据的处理，效果图也在下面，代码如下附上： 

//表头加字体图标hover显示信息
icons(h,{column,$index}){
        const inReview = '提示信息'
        const inReviews = '提示信息1'
        return h('div', [
                h('span', column.label),
                h('el-tooltip', {
                    props: {
                        // effect:'light',//提示框主题黑白dark/light    
                        placement: 'top',
                    }
                }, [
                    h('div', {
                        effect:'light',
                        slot: 'content',
                        style: {
                            'width':'120px',
                             whiteSpace: 'normal',
                             'margin-bottom': '10px'
                        }
                    }, this.title),
                    h('div', {
                        effect:'dark',
                        slot: 'content',
                        style: {
                            'width':'120px',
                             whiteSpace: 'normal',
                            'margin-bottom': '10px'
                        }
                    }, this.titleData[$index]),
                    h('i', {
                        class: 'iconfont icon-shuoming',
                        style: 'margin-left:5px;font-size: 12px;color:#BBBBBB;'  //888888
                    })
                ],)
        ])
},

效果如下：

后台给的数据格式是这样，我这里处理转了一下

往期热门文章

avatar
文章
阅读
粉丝