表字段显示tip

小妖别跑2024-08-11 21:03

需求背景：

生成的报表，前端只展示字段名称，计算逻辑没有解释，使用方频繁"骚扰"，实在受不了，增加一个字段tip，实现效果（下图）：

代码

结合使用el-table-column和ElTooltip，实现

单行tip

html 复制代码

<el-table-column label="缺勤日期" align="center" prop="billingDate" width="150" sortable >
        <template #header>
          <Tooltip
            message="商品销售汇总表中的帐单日期"
            title="缺勤日期"
          />
        </template>
      </el-table-column>

Tooltip实现

html 复制代码

<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

html 复制代码

<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这个组件是显示？，可以自行定义，看你爱好