今天实现一个功能,要在table表格做一个el-tooltip
大概长这样
然后贴一下代码,做一个记录
<el-table :data="statisticsTable" border style="width: 100%" :default-sort="{order: 'descending'}" @sort-change="changeStatistics">
<el-table-column fixed prop="storeName" label="门店名称" />
<el-table-column fixed prop="storeAddress" label="门店省市区" />
<el-table-column prop="dealerName" label="经销商" />
<el-table-column prop="ticketNum" label="已核销优惠券(张)" sortable="custom" />
<el-table-column prop="goodsNum" label="销售商品(件)" sortable="custom"/>
<el-table-column prop="ticketPrice" label="核销总金额(元)" sortable="custom" :render-header="renderPrice"/>
<el-table-column prop="goodsPrice" label="用券总成交额(元)" sortable="custom" :render-header="renderGoods"/>
<el-table-column prop="ratio" label="费效比" sortable="custom" :render-header="renderRatio"/>
</el-table>
在table列中设置属性:render-header=" "
// methods方法
renderPrice(h, { column, $index }) {
return [
column.label,
h(
"el-tooltip",
{
props: {
content: "核销总金额 = 已核销优惠券 x 优惠券面值",
placement: "top"
}
},
[h("span", { class: { "el-icon-question": true } })]
)
]
},
最后实现效果