Steps步骤条为什么无法正确显示当前步骤？

Tr° 晨旭提问于 2026-03-15 10:30:20 阅读 42

组件

我在用 Ant Design 的 Steps 组件时，明明设置了 current 属性为 1，但页面上还是高亮了第一步，而不是第二步。是不是我哪里写错了？

我的代码结构是这样的：

<a-steps :current="1">
  <a-step title="填写信息" />
  <a-step title="确认订单" />
  <a-step title="支付完成" />
</a-steps>

控制台也没报错，但视觉上就是不对，current=1 应该激活第二个步骤才对啊？

Steps步骤条反馈组件

我来解答赞 11 收藏

反馈

1 条解答

UX-欣辰 Lv1

这个问题很简单，你理解反了。

Ant Design 的 Steps 组件，current 是从 0 开始计数的，不是从 1 开始。

current=0 高亮第一个 step，current=1 才高亮第二个 step。

你的代码 :current="1" 写的是对的，应该高亮第二个"确认订单"。如果显示的还是第一个，那问题不在 current 的值上。

常见原因是 Vue 响应式没生效。你试试这样：

<a-steps :current="Number(1)">

  <a-step title="填写信息" />

  <a-step title="确认订单" />

  <a-step title="支付完成" />

</a-steps>

或者如果 current 是从 data 里取的，检查一下是不是字符串"1"而不是数字1：

data() {

  return {    currentStep: 1  // 必须是数字，别写成 '1'

  }

}

还有一种情况是你用了 keep-alive 或者某些缓存机制导致组件没更新，强制刷一下页面看看。

如果还不行，直接在控制台打印一下 this.current 看看值到底是啥，确认数据没问题。

2026-03-17 08:11