先上效果图：

element ui 组件库官网

---

使用步骤：

1、页面组合步骤 ==> 5步

1. 定义出4个步骤（看你自己需要几步）
2. 定义form表单
3. 定义4个盒子对象active属性 => 1 到 4
4. 放置表单项
5. 设置上一步和下一步的按钮

<template>//第一步:定义出4个步骤
<el-steps :active="active" finish-status="success"><el-step title="第一步" /><el-step title="第二步" /><el-step title="第三步" /><el-step title="第四步" />
</el-steps>//第二步:定义form表单
<el-formref="dataForm":model="":rules="formRules"label-position="left"label-width="100px"style="width: 400px; margin-left: 50px">//第三步:定义4个盒子对象active => 1 到 4
<div v-show="active == 1">//第四步:放置表单项//...<el-form-item label="设备名称" prop="name"><el-input v-model="temp.name" placeholder="请输入" /></el-form-item></div>
<div v-show="active == 2"></div>
<div v-show="active == 3"></div>
<div v-show="active == 4"></div></el-form>//第五步:设置上一步和下一步的按钮
<el-button v-if="active < 4" style="margin-top: 12px" @click="next">下一步</el-button>
<el-button v-if="active > 1" style="margin-top: 12px" @click="pre">上一步</el-button></template>

2、设置对应的属性和方法

1. 设置默认active的值
2. 绑定上一步和下一步的方法

data() {return {//默认第一步active: 1,}
}methods: {// 步骤条下一步的方法next() {if (this.active++ > 3) this.active = 1},// 步骤条上一步的方法pre() {if (this.active-- < 2) this.active = 1},}

---

注意事项：

绑定active属性的盒子，强烈推荐使用v-show，不推荐使用v-if

//推荐
<div v-show="active == 1"></div>//不推荐
<div v-if="active == 1"></div>

原因：

v-show：是单纯隐藏了组件


v-if：是创建和销毁组件


如果表单里面引用了其他组件比如上传，使用v-if会导致表单里面上传组件的属性不生效

---

既然说到了上传组件：

这边推荐的文章了解下上传组件的生命周期 ==> 文章入口
这篇文章写的很清晰明了，能很好的理解upload组件

小编在这边就简单说下：

1. uploadFiles是源码里面的属性
2. 外部传入属性filelist发生变化，uploadFiles 直接等于 filelist