做柜子比较好看的网站,作图神器,太原自动seo,wordpress 制作网站模板教程需求背景#xff1a;
生成的报表#xff0c;前端只展示字段名称#xff0c;计算逻辑没有解释#xff0c;使用方频繁“骚扰”#xff0c;实在受不了#xff0c;增加一个字段tip#xff0c;实现效果#xff08;下图#xff09;#xff1a; 代码 结合使用el-table-colu…需求背景
生成的报表前端只展示字段名称计算逻辑没有解释使用方频繁“骚扰”实在受不了增加一个字段tip实现效果下图 代码 结合使用el-table-column和ElTooltip实现 单行tip
el-table-column label缺勤日期 aligncenter propbillingDate width150 sortable template #headerTooltipmessage商品销售汇总表中的帐单日期title缺勤日期//template/el-table-columnTooltip实现
script langts setup
import { propTypes } from /utils/propTypesdefineOptions({ name: Tooltip })defineProps({title: propTypes.string.def(),message: propTypes.string.def(),icon: propTypes.string.def(ep:question-filled)
})
/script
templatespan{{ title }}/spanElTooltip :contentmessage placementtopIcon :iconicon classrelative top-1px ml-1px //ElTooltip
/template
多行tip
el-table-column label收货单号 aligncenter propreceiptNumber width180 sortable template #headerspan收货单号/spanel-tooltip placementtop effectdarktemplate #content从收货单管理中根据缺勤分析中“门店名称和缺勤商品的sku码”br/取此缺勤日期当日开始及之后最近一次的此商品收货单明细br/填写收货单号创建日期、创建人、发货量、收货日期、净收货量/templateIcon :iconicon classrelative top-1px ml-1px //el-tooltip/template/el-table-column
script
defineProps({icon: propTypes.string.def(ep:question-filled)
})
/script效果如下 ps:ep:question-filled这个组件是显示可以自行定义看你爱好
