Steps步骤条的active状态怎么不生效?

南宫纪娜 阅读 23

我用的是Element Plus的Steps组件,但设置active属性后当前步骤没高亮,不知道哪里出错了。

我已经绑定了一个data里的变量,初始值是0,点击下一步时也加了1,但UI上就是没反应。控制台也没报错,很奇怪。

<el-steps :active="currentStep" finish-status="success">
  <el-step title="步骤1"></el-step>
  <el-step title="步骤2"></el-step>
  <el-step title="步骤3"></el-step>
</el-steps>

<button @click="currentStep++">下一步</button>
我来解答 赞 5 收藏
二维码
手机扫码查看
1 条解答
UP主~莉莉
你这个问题我见过好几次了,Element Plus 的 Steps 组件确实容易踩坑,尤其是 active 属性的逻辑容易被误解。

先说结论:你的 currentStep 初始值是 0,但 Steps 的 active 是“当前完成的步骤索引”,不是“当前正在显示的步骤”。也就是说,active=0 表示第 1 步已经完成,第 2 步是当前进行中;而 UI 上的“高亮”通常指的是已完成步骤的图标和标题变绿(配合 finish-status="success"),当前步骤本身并不会被高亮,而是显示为“进行中”的蓝色状态。

你贴的代码里只写了 active="currentStep",但没看到 上有没有写 status,而 Element Plus 的步骤状态默认是 wait(灰色),只有当 active 超过某个步骤索引时,它才会变成 finish(绿色),当前步骤则是 process(蓝色),但前提是组件能正确识别状态变化。

我猜你可能遇到下面几种情况之一:



第一种:currentSteprefreactive 里的值,但用了 Vue 2 的写法或者没正确响应式绑定
比如你可能在 data() 里写了 currentStep: 0,但在