element ui Steps 步骤条怎么才能点击当前状态 其他状态不变
时间: 2023-07-20 12:22:55 浏览: 160
要实现点击当前状态,其他状态不变的效果,可以通过设置 `element-ui` 的 `Steps` 组件的 `clickable` 属性为 `true`,并绑定 `click` 事件来实现。
具体步骤如下:
1. 设置 `Steps` 组件的 `clickable` 属性为 `true`,这样每个步骤都可以被点击。
2. 在每个 `Step` 上绑定 `click` 事件,通过判断点击的步骤是否为当前步骤,如果是则不做任何操作,如果不是则将当前步骤切换为点击的步骤。
以下是一个示例代码:
```html
<template>
<el-steps :active="active" :clickable="true" @click="handleStepClick">
<el-step title="步骤一"></el-step>
<el-step title="步骤二"></el-step>
<el-step title="步骤三"></el-step>
</el-steps>
</template>
<script>
export default {
data() {
return {
active: 0 // 当前步骤
}
},
methods: {
handleStepClick(index) {
if (index !== this.active) {
this.active = index
}
}
}
}
</script>
```
在上面的代码中,我们在 `handleStepClick` 方法中判断了点击的步骤是否为当前步骤,如果不是则将当前步骤切换为点击的步骤。
阅读全文