element的步骤条整合表单(steps+form)

先上效果图:

element ui 组件库官网
element的步骤条整合表单(steps+form)_第1张图片


使用步骤:

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会导致表单里面上传组件的属性不生效


既然说到了上传组件:

element的步骤条整合表单(steps+form)_第2张图片

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

小编在这边就简单说下:

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

你可能感兴趣的:(前端,步骤条整合表单,elementui,vue)