首页 > 其他 > 详细

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

时间:2020-01-02 19:22:10      阅读:558      评论:0      收藏:0      [点我收藏+]

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

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

原文:https://www.cnblogs.com/tlfe/p/12134147.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!