SuperAPI AI 工具集

el-statistic

数据与分析

查看项目

更新于 10-15 23:32

技能介绍

el-statistic 是 Element Plus 中用于展示数值统计的组件技能,适合在用户需要显示计数、金额、排名或倒计时等场景时调用。

主要能力:展示数值并支持可选格式化;通过 title 设置标题,prefix/suffix 添加前后缀;precision 控制小数精度,group-separator 与 decimal-separator 分别设置千分位和小数分隔符;formatter 可传入自定义函数返回字符串或数字;value-style 控制数值样式。组件还提供 title、prefix、suffix 三个插槽用于自定义内容。

倒计时:el-countdown 用于时间敏感展示,value 传入目标时间(number 或 Dayjs),format 控制显示格式,默认 'HH:mm:ss';支持 change 事件(时间差变化时触发)和 finish 事件(倒计时结束);同样提供 title、prefix、suffix 插槽。

使用方式:基本用法为 <el-statistic title="Total Users" :value="268500" />;带前后缀如 prefix="$" suffix="USD";格式化示例传入 :value="1234567.89"、:precision="2"、group-separator=","、decimal-separator=".";自定义 formatter 示例中传入 :formatter="formatter"。倒计时示例为 <el-countdown title="Countdown" :value="deadline" @finish="handleFinish" />,其中 deadline 可由 ref 设置。

适用场景:仪表盘统计、计数展示、金额展示与倒计时。

限制与建议:精确小数使用 precision,大数字使用 group-separator,时间敏感展示使用 Countdown。其他细节暂未提供。