element的步骤条整合表单（steps+form）

先上效果图：

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-form
    ref="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