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

 

 

//表头加字体图标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
                                })
                            ],)
                    ])
            },

效果如下：

 

 

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