当前位置: 首页> 娱乐> 明星 > 表字段显示tip

表字段显示tip

时间:2025/7/14 1:05:00来源:https://blog.csdn.net/qq_43048011/article/details/140946257 浏览次数:0次

需求背景:

生成的报表,前端只展示字段名称,计算逻辑没有解释,使用方频繁“骚扰”,实在受不了,增加一个字段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这个组件是显示?,可以自行定义,看你爱好

关键字:表字段显示tip

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: