el-steps的完整用法，根据状态选中

el-steps是Element UI框架中的一个组件，它提供了一种分步展示信息的方式。其完整用法可以分为以下几步：

1. 导入el-steps和el-step组件。

2. 在模板中使用el-steps组件，并通过props传递一些参数，例如direction（设置步骤条的方向）、active（设置当前步骤的索引）、finish-status（设置已完成步骤的状态）等。

3. 在el-steps组件中使用el-step组件来定义每个步骤。同样可以通过props传递一些参数，例如title（设置步骤的标题）、description（设置步骤的描述信息）等。

4. 根据当前状态设置active参数来选中对应的步骤。

请注意，以上只是一般的使用方式，并不一定适用于所有情况。具体用法还需要根据实际需求来确定。

相关问题

el-steps 设置了align-center为什么还同时改变了el-steps的宽度

当你将 `align-center` 应用于 `el-steps` 组件时，它会将每个步骤居中对齐。但是，如果在 `el-steps` 组件的父级容器中设置了一个固定的宽度，那么 `el-steps` 组件的宽度也会受到这个父级容器的宽度限制。因此，即使你将 `el-steps` 中的步骤居中对齐，但容器的宽度限制会影响 `el-steps` 的宽度。如果你想要 `el-steps` 组件的宽度不受父级容器的限制，你可以将宽度设置为 `100%`。

el-steps基础用法不要步骤条的123

el-steps是Element UI提供的一个步骤条组件，可以用来展示流程进度，以下是使用el-steps的基础用法（不包含步骤条的123）。

1. 引入el-steps组件

<template>
  <el-steps :active="activeIndex" finish-status="success">
    <el-step title="步骤一"></el-step>
    <el-step title="步骤二"></el-step>
    <el-step title="步骤三"></el-step>
  </el-steps>
</template>

<script>
import { ElSteps, ElStep } from 'element-ui'

export default {
  components: {
    ElSteps,
    ElStep
  },
  data() {
    return {
      activeIndex: 0
    }
  }
}
</script>

2. 设置active属性控制当前步骤的索引

<el-steps :active="activeIndex" finish-status="success">

3. 设置finish-status属性控制已完成的步骤的状态

<el-steps :active="activeIndex" finish-status="success">

4. 通过点击步骤条切换当前步骤

<el-steps :active="activeIndex" finish-status="success" @step-click="activeIndex = $event">

完整代码如下：

<template>
  <el-steps :active="activeIndex" finish-status="success" @step-click="activeIndex = $event">
    <el-step title="步骤一"></el-step>
    <el-step title="步骤二"></el-step>
    <el-step title="步骤三"></el-step>
  </el-steps>
</template>

<script>
import { ElSteps, ElStep } from 'element-ui'

export default {
  components: {
    ElSteps,
    ElStep
  },
  data() {
    return {
      activeIndex: 0
    }
  }
}
</script>