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;'
                    })
                ],)
            ]
　　　　 )
      }
}