表字段显示tip

需求背景:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/393411.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Unity实战]Mirror网络与Addressable场景管理

前言 很遗憾&#xff0c;Mirror包括UNET的场景管理不支持Addressables。我做手机游戏&#xff0c;需要实现服务器广播场景切换&#xff0c;但主程序没有场景&#xff0c;热更代码和资源都在AB包里。我已经在Google上搜索了一段时间&#xff0c;没有找到有用的解决方案。 Redd…

unity VR项目3DUI:人物头部旁“说话框”,功能:1.永远朝向相机 2.打字效果 3.UI不会被模型遮挡 4.切换位置 5.文字自动根据内容扩充

提示&#xff1a;文章有错误的地方&#xff0c;还望诸位大神不吝指教&#xff01; 文章目录 前言一、UI搭建1.创建基节点2.创建Canvas3.添加永远看向相机代码4.创建UI背景&#xff0c;设置相关操作1.锚点设置2.添加组件&#xff1a;Vertical Layout Group、Content Size Fitter…

上海冷链配送新篇章 华鼎冷链科技以卓越服务餐饮品牌

在快速发展的上海餐饮连锁行业中&#xff0c;冷链运输作为保障食品安全与品质的关键环节&#xff0c;正迎来前所未有的发展机遇与挑战。华鼎冷链科技作为该领域的佼佼者&#xff0c;正引领着上海乃至全国冷链运输行业的新风尚。 华鼎冷链科技的成功并非一蹴而就。首先&#xff…

视频融合技术

三维视频融合技术遵循数字孪生多源数据融合的原则&#xff0c;比视频窗口、矩阵更加直观高效&#xff0c;省去了人脑理解空间的时间&#xff0c;可有效提升数字孪生城市在物联感知操作、虚实融合交互等方面的能力&#xff0c;动静一体、虚实结合&#xff0c;让三维场景“动起来…

MATLAB基础应用精讲-【数模应用】配对样本Wilcoxon检验(附MATLAB、R语言和python代码实现)

目录 知识储备 常用的统计假设检验的方法 算法原理 什么是Wilcoxon符号秩检验? 何时使用Wilcoxon符号秩检验 适用条件 SPSS-符号秩检验 一统计理论 二实例分析 三拓展知识 SAS --配对样本Wilcoxon符号秩检验 SPSSAU 配对样本Wilcoxon检验案例 1、背景 2、理论 …

SQL注入sqli-labs-master关卡一

本文环境搭建使用的是小皮&#xff0c;靶机压缩包&#xff1a;通过百度网盘分享的文件&#xff1a;sqli-labs-php7-master.zip 链接&#xff1a;https://pan.baidu.com/s/1xBfsi2lyrA1QgUWycRsHeQ?pwdqwer 提取码&#xff1a;qwer 下载解压至phpstudy的WWW目录下即可。 第一…

无缝协作的艺术:Codigger 视频会议(Meeting)的用户体验

在当今数字化的时代&#xff0c;远程协作已经成为工作和学习中不可或缺的一部分。然而&#xff0c;远程协作也面临着诸多挑战&#xff0c;如沟通不畅、信息同步不及时、协作工具的复杂性等。而 Codigger 视频会议&#xff08;Meeting&#xff09;作为一款创新的工具&#xff0c…

计算机的错误计算(五十四)

摘要 回复网友关于正确计算计算机的错误计算&#xff08;五十一&#xff09;与&#xff08;五十二&#xff09;中所述案例时的 3点注意事项。 问&#xff1a;对于计算机的错误计算&#xff08;五十一&#xff09;中的案例 &#xff0c;由&#xff08;五十二&#xff09;知&a…

数据结构第九讲:二叉树

数据结构第九讲&#xff1a;二叉树 1.实现链式结构二叉树1.1二叉树的节点结构1.2创建二叉树节点1.3前中后序遍历1.3.1前序遍历1.3.2中序遍历1.3.3后序遍历1.3.4总结 1.4二叉树结点的个数1.4.1错误示范1.4.2实现方法 1.5二叉树叶子结点的个数1.6二叉树第k层结点的个数1.7二叉树的…

计算机语言-CSP初赛知识点整理

历年真题 [2020-CSP-J-第2题] 编译器的主要功能( ) A. 将源程序翻译成机器指令代码 B. 将源程序重新组合 C. 将低级语言翻译成高级语言 D. 将一种高级语言翻译成另一种高级语言 [2021-CSP-J-第1题] 以下不属于面向对象程序设计语言的是&#xff08;&#xff09;。 A. C B. Pyt…

CLOS架构

CLOS Networking CLOS Networking 是指使用 Clos 网络拓扑结构&#xff08;Clos Network Topology&#xff09;进行网络设计的一种方法。该方法是由贝尔实验室的工程师 Charles Clos 在1950年代提出的&#xff0c;以解决电路交换网络的可扩展性和性能问题。随着现代计算和网络…

P33-模拟实现字符串相关函数

模拟实现strcpy strcpy函数是C语言中的字符串拷贝函数&#xff0c;用于将一个字符串复制到另一个字符串中。 函数原型如下&#xff1a; char* strcpy(char* destination, const char* source);参数说明&#xff1a; destination&#xff1a;目标字符串的指针&#xff0c;用于存…

北大和鹏城实验室联合推出的图像视频统一多模态大模型Chat-UniVi(CVPR 2024)

Chat-UniVi: Unified Visual Representation Empowers Large Language Models with Image and Video Understanding 论文信息 paper&#xff1a;CVPR 2024 code&#xff1a;https://github.com/PKU-YuanGroup/Chat-UniVi 训练130亿大模型仅3天&#xff0c;北大提出Chat-UniVi…

Tomcat 漏洞

一.CVE-2017-12615 1.使用burp抓包 把get改成put jsp文件后加/ 添加完成后访问 木马 然后木马的网址 在哥斯拉测试并且添加 添加成功 然后我们就成功进去啦、 二.弱口令 点击后输入默认用户名、密码&#xff1a;tomcat/tomcat 登陆之后上传一个jsp文件 后缀改成war 然后访问我…

android compose设置圆角不起作用

进度条progress设置背景圆角不起作用&#xff1a; 源码&#xff1a; Composablefun CircularProgress(modifier: Modifier, vm: TabarCmpViewModel?) {if (vm?.showLoading?.value ! true) returnBox(modifier modifier.background(Color(0x99000000)).defaultMinSize(minW…

【深度学习】【语音TTS】OpenVoice v2,测评,中英文语料,Docker镜像,对比GPT-SoVITS、FishAudio、BertVITS2

https://github.com/myshell-ai/OpenVoice/blob/main/docs/USAGE.md 实际体验OpenVoice v2的TTS效果。 文章目录 环境启动 jupyter代码代码分析主要模块和功能测试一些别的中文和中英文混合总结优点缺点对比GPT-SoVITS、FishAudio、BertVITS2使用我的Docker镜像快速体验OpenVo…

4.7.深层循环神经网络

深层循环网络 ​ 就是更深了&#xff0c;因为之前的网络都只有一层隐藏层&#xff0c;弄多一点 ​ 我们将多层循环神经网络堆叠在一起&#xff0c;通过对几个简单层的组合&#xff0c;产生了一个灵活的机制。上图展示了一个具有 L L L个隐藏层的深度循环神经网络&#xff0c;每…

【C++】STL | vector 详解及重要函数的实现

目录 前言 总代码 vector类框架建立&#xff08;模板与成员变量&#xff09; 构造、析构、swap 与 赋值重载 构造 析构 swap 赋值重载 reserve 扩容&#xff08;重要&#xff01;&#xff01;&#xff09;、size、capacity operator[ ]重载 insert 插入 逻辑讲解 i…

Oracle认证1Z0-071线上考试注意事项

目录 一、前言二、回顾过往战绩第一次 裸考&#x1f412;第二次 背题库硬考&#xff01;&#x1f412;第三次 软件卡住&#xff0c;寄&#xff01;&#x1f648;第四次 汇总纠错&#xff0c;通过&#xff01;&#x1f31a; 三、考试流程四、考试注意事项1. 是否需要科学上网2. …

探索四川财谷通抖音小店:安全与信赖的购物新体验

在数字经济蓬勃发展的今天&#xff0c;抖音平台凭借其庞大的用户基础和强大的内容生态&#xff0c;逐渐成为了电商领域的一股不可忽视的力量。其中&#xff0c;四川财谷通抖音小店作为这一浪潮中的佼佼者&#xff0c;不仅以其丰富的商品种类和独特的品牌魅力吸引了众多消费者的…