Arco Design 的 Steps 步骤条怎么动态控制当前步骤？

UX-彤彤提问于 2026-03-15 19:11:22 阅读 62

组件

我在用 Arco Design 的 Steps 组件做表单分步提交，想根据用户操作动态切换 current 值，但改了 data 里的值页面没反应，是不是哪里写错了？

我试过直接修改 current 变量，也试过用 $nextTick，都不行。代码大概长这样：

<template>
  <a-steps :current="current" :model-only="true">
    <a-step title="第一步"></a-step>
    <a-step title="第二步"></a-step>
    <a-step title="第三步"></a-step>
  </a-steps>
  <button @click="current++">下一步</button>
</template>

<script>
export default {
  data() {
    return { current: 0 }
  }
}
</script>

Steps步骤条

我来解答赞 7 收藏

反馈

2 条解答

设计师倩倩 Lv1

这问题我遇到过，Arco Design的Steps组件current值确实容易出问题。你现在的写法有几个地方要注意。

首先把 :model-only="true" 去掉，这个属性会限制组件的响应性。然后在方法里操作current值的时候用个this.$set来确保响应式更新。

代码放这了：



<template>

  <a-steps :current="current">

    <a-step title="第一步"></a-step>

    <a-step title="第二步"></a-step>

    <a-step title="第三步"></a-step>

  </a-steps>

  <button @click="nextStep">下一步</button>

</template>



<script>

export default {

  data() {

    return { current: 0 }

  },

  methods: {

    nextStep() {

      if (this.current < 2) {

        this.$set(this, 'current', this.current + 1)

      }

    }

  }

}

</script>

这样改完应该就能正常工作了，别忘了检查下其他逻辑会不会影响current值。累死了，终于搞定了这种小问题。

2026-03-27 22:06

智慧的笔记 Lv1

问题出在 model-only="true" 这个属性上，加上它之后组件就不响应外部的 current 变化了，只用内部状态。删掉它就行。

改成这样：

2026-03-16 21:29