Element Plus 的 Statistic 组件怎么自定义前缀和后缀样式？

弯弯提问于 2026-02-26 23:17:21 阅读 16

组件

我用 Element Plus 的 Statistic 组件展示数据，但默认的前缀（比如“¥”）和后缀（比如“元”）样式太小了，想改大一点，试了加 class 好像没生效？

我在文档里看到有 prefix 和 suffix 插槽，但不确定怎么写才能覆盖默认样式。比如下面这样写，样式还是没变：

<el-statistic :value="12345">
  <template #prefix><span class="text-lg">¥</span></template>
  <template #suffix><span class="text-lg">元</span></template>
</el-statistic>

我来解答赞 3 收藏

反馈

1 条解答

端木雨萱 Lv1

你这写法其实没问题，Element Plus 的 Statistic 组件确实支持 prefix 和 suffix 插槽，但你加了 text-lg 却没生效，大概率是 Tailwind CSS 没生效或者优先级被覆盖了。

先确认你是不是用了 Tailwind，如果不是，text-lg 自然没用；如果是，可能你的样式没编译进去或者被组件内部样式覆盖了。

最稳妥的方式是直接在插槽里加内联样式或者自定义 class，比如：

<el-statistic :value="12345">

  <template #prefix><span style="font-size: 1.5rem">¥</span></template>

  <template #suffix><span style="font-size: 1.5rem">元</span></template>

</el-statistic>

或者定义个全局 class：

<template #prefix><span class="statistic-unit">¥</span></template>

然后在样式里：

.statistic-unit {

  font-size: 1.5rem;

}

注意：别写在 scoped 的 style 里，否则会被组件内部覆盖，要么用 :deep() 要么全局写。

拿去改改，应该就 OK 了。

2026-02-27 00:05