admin 管理员组文章数量: 1087818
element的步骤条整合表单（steps+form）
先上效果图：
element ui 组件库官网
使用步骤：
1、页面组合步骤 ==> 5步
- 定义出4个步骤（看你自己需要几步）
- 定义form表单
- 定义4个盒子对象active属性 => 1 到 4
- 放置表单项
- 设置上一步和下一步的按钮
<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、设置对应的属性和方法
- 设置默认active的值
- 绑定上一步和下一步的方法
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组件
小编在这边就简单说下：
- uploadFiles是源码里面的属性
- 外部传入属性filelist发生变化，uploadFiles 直接等于 filelist
本文标签： element的步骤条整合表单（stepsform）
版权声明：本文标题：element的步骤条整合表单（steps+form） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700372401a418410.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论