需求背景:
生成的报表,前端只展示字段名称,计算逻辑没有解释,使用方频繁“骚扰”,实在受不了,增加一个字段tip,实现效果(下图):
代码
结合使用el-table-column和ElTooltip,实现
单行tip
<el-table-column label="缺勤日期" align="center" prop="billingDate" width="150" sortable ><template #header><Tooltipmessage="商品销售汇总表中的帐单日期"title="缺勤日期"/></template></el-table-column>
Tooltip实现
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'defineOptions({ name: 'Tooltip' })defineProps({title: propTypes.string.def(''),message: propTypes.string.def(''),icon: propTypes.string.def('ep:question-filled')
})
</script>
<template><span>{{ title }}</span><ElTooltip :content="message" placement="top"><Icon :icon="icon" class="relative top-1px ml-1px" /></ElTooltip>
</template>
多行tip
<el-table-column label="收货单号" align="center" prop="receiptNumber" width="180" sortable ><template #header><span>收货单号</span><el-tooltip placement="top" effect="dark"><template #content>从收货单管理中,根据缺勤分析中“门店名称和缺勤商品的sku码”,<br/>取此缺勤日期当日开始及之后最近一次的此商品收货单明细,<br/>填写:收货单号,创建日期、创建人、发货量、收货日期、净收货量;</template><Icon :icon="icon" class="relative top-1px ml-1px" /></el-tooltip></template></el-table-column>
<script>
defineProps({icon: propTypes.string.def('ep:question-filled')
})
</script>
效果如下:
ps:ep:question-filled这个组件是显示?,可以自行定义,看你爱好