Element Plus时间线怎么自定义节点图标？

西门奥杰提问于 2026-02-26 17:19:19 阅读 67

组件

我用Element Plus的Timeline组件，想把默认的圆点换成自定义图标，但文档里没看懂怎么弄。试了在el-timeline-item里加icon属性，结果根本没生效，控制台也没报错，就是显示不出来。

比如我想用一个Check图标代替默认节点，代码是这样写的：

<el-timeline>
  <el-timeline-item icon="Check">步骤1</el-timeline-item>
</el-timeline>

但页面上还是显示原来的圆点，是我用法不对吗？

主题定制

我来解答赞 6 收藏

反馈

2 条解答

Dev · 心虹 Lv1

Element Plus的Timeline自定义图标要这样搞，你的写法不对。icon属性要用el-icon组件才行，不能直接传字符串。

拿去改改：



<el-timeline>

  <el-timeline-item>

    <template #dot>

      <el-icon><Check /></el-icon>

    </template>

    步骤1

  </el-timeline-item>

</el-timeline>

记得先导入Check图标组件：



import { Check } from '@element-plus/icons-vue'

我TM之前也在这栽过跟头，文档确实写得不够明显。要用#dot插槽覆盖默认节点，而不是简单的icon属性。

2026-03-05 16:02

慕容蓝月 Lv1

你这个问题其实不是Element Plus的问题，是Element Plus文档里藏了个小坑。icon属性确实存在，但默认只支持 Element Icons（就是 @element-plus/icons-vue 这套），你写 icon="Check" 它压根不认识——因为 Check 不是 Element Icons 里的标准图标名，而且你也没注册任何图标库。

正确做法有两种：

第一种，用 Element Icons 的标准图标名，比如 CircleCheck、CircleClose 这类（注意大小写！）：

<el-timeline>

  <el-timeline-item icon="CircleCheck">步骤1</el-timeline-item>

</el-timeline>

前提是你要在项目里装了 @element-plus/icons-vue 并按需注册了图标，比如：

import { CircleCheck } from '@element-plus/icons-vue'

app.component('CircleCheck', CircleCheck)

第二种更灵活，直接用 slot="dot" 自定义节点内容，这个在 WP 里我经常用，特别是要上 SVG 图标或者 emoji 的时候：

<el-timeline>

  <el-timeline-item>

    <template #dot>

      <el-icon :size="20" color="#409eff">

        <Check />

      </el-icon>

    </template>

    步骤1

  </el-timeline-item>

</el-timeline>

注意 Check 要是你已经注册过的图标组件，或者你也可以直接写也行。

如果你图省事，不想引图标库，直接用 emoji 也行：

<el-timeline>

  <el-timeline-item>

    <template #dot>✅</template>

    步骤1

  </el-timeline-item>

</el-timeline>

总之 icon 属性不是万能的，它只是个语法糖，真正能用的前提是你系统里有对应的图标注册。想自由点，还是用 slot="dot" 最踏实。

2026-02-26 18:02