一、表格内标题添加问号提示语
例如:我在项目中 以下是表格的一部分内容
<el-table-column label="主播佣金" :render-header="renderHeader" align="center" width="120px">
<template slot-scope="{ row }">
<span style="color:red;">{{ row.commissionRate }}%</span>
</template>
</el-table-column>
使用 :render-header="renderHeader"方法
renderHeader(h, { column, $index }) {
const currentLabel = column.label
return h('span', {}, [
h('span', {}, currentLabel),
h('el-tooltip',
{ props: { placement: 'top-start', width: '200', trigger: 'hover', content: '给主播的佣金比例,主播佣金=(直播价-直播供货价)÷直播价' }},
[
h('i', { class: 'el-icon-question' })
]
)
])
},
效果展示:
文字可以换行
<template slot-scope="scope" slot="header">
<span>
总成交订单金额
<el-tooltip :aa="scope" class="item" effect="dark" content="" placement="top-start">
<div slot="content">总成交订单金额:所选时间段范围</br>内当前达人所有已支付订单实付</br>金额总数,包括售后中的订单</div>
<i class= 'el-icon-question' style="color:#409eff; margin-left:5px;'"> </i>
</el-tooltip>
</span>
</template>
二、不是表格添加划过问号提示图片
<el-popover
placement="right"
title=""
trigger="hover"
v-if="isHeader == 1"
>
<el-image :src="require('@/assets/goods_images/goods_id.png')" style="width: 650px;height: 400px"></el-image>
<el-button type="text" slot="reference"> <i class="el-icon-question"></i></el-button>
</el-popover>