当前位置：首页 > news >正文

表字段显示tip

news 2025/8/18 10:54:14

需求背景：

生成的报表，前端只展示字段名称，计算逻辑没有解释，使用方频繁“骚扰”，实在受不了，增加一个字段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>