TDesign Steps步骤条如何动态更新当前步骤？

丽丽 ☘︎ 提问于 2026-03-09 17:14:24 阅读 4

组件

我在用 TDesign 的 Steps 组件做一个多步骤表单，想根据用户操作动态改变当前步骤（current），但发现页面上步骤条没反应。我试过直接修改 data 里的 current 值，也用了 Vue 的 $set，都不行。是不是我哪里写错了？

下面是我的简化代码：

<template>
  <t-steps :current="current" :steps="steps" />
  <button @click="nextStep">下一步</button>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      steps: [{ title: '第一步' }, { title: '第二步' }]
    }
  },
  methods: {
    nextStep() {
      this.current += 1; // 这里改了，但UI没更新
    }
  }
}
</script>

Steps步骤条 TDesign

我来解答赞 4 收藏

反馈

1 条解答

Mr.树源 Lv1

看你的代码，问题出在直接修改了 current 但 UI 没响应。TDesign 的 Steps 组件对 current 的响应式有要求，试试这样改：

nextStep() {

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

  // 或者用 Vue 3 的写法

  // this.current += 1

  // this.$forceUpdate()

}

如果还不行，可能是你的 TDesign 版本问题。我这边的生产环境用 $set 就能搞定，实在不行可以加个 key 强制重新渲染：

在 nextStep 方法里同时更新 refreshKey：

nextStep() {

  this.current += 1

  this.refreshKey = Date.now()

}

这是我在项目里实际用过的解决方案，复制过去试试。

2026-03-09 17:17