1 需求:新增修改项内容要实现分页-上下页
- 注意:很多人找不到内容填充在那,一般需要加一个div
页面展示:
模板示例 框架链接
1 需求:新增修改项内容要实现分页-上下页
- 注意:很多人找不到内容填充在那,一般需要加一个div
注意:很多人找不到内容填充在那,一般需要加一个div
<div v-if="active==0" class="info">内容一</div>
<div v-if="active==2" class="info">内容二</div>
<div v-if="active==3" class="info">内容三</div>
<div v-if="active==4" class="info">内容四</div>
2 代码实现
- 注意:很多人找不到内容填充在那,一般需要加一个div
- 表单里的代码
<div v-if="active==0" class="info">
<el-form-item label="照片" style="width: 470px">
<el-upload
v-model="form.avatarId"
class="avatar-uploader"
action="https://jsonplaceholder.typicode/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
<!-- <el-input v-model="form.avatarId" style="width: 370px;" /> -->
</el-form-item>
</div>
<div v-if="active==1" class="info">
<el-form-item label="专业技术职务">
<el-input v-model="form.major" style="width: 370px;" />
</el-form-item>
</div>
<div v-if="active==2" class="info">
<el-form-item label="简历">
<el-input v-model="form.resume" :rows="3" type="textarea" style="width: 370px;" />
</el-form-item>
</div>
<div v-if="active==3" class="info">
<el-form-item label="审核状态">
<el-select v-model="form.auditStatus" filterable placeholder="请选择">
<el-option
v-for="item in dict.audit_status"
:key="item.id"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</div>
<div center="true">
<el-button v-if="active==1||active==2||active==3" style="margin-top: 12px;" text-align:center icon="el-icon-arrow-left" type="primary" @click="prev">上一步</el-button>
<el-button v-if="active==0||active==1||active==2" style="margin-top: 12px;" icon="el-icon-arrow-left" type="primary" @click="next">下一步</el-button>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button v-if="active==3" :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
注意:我把最后一步中加入v-if="active==3"
目的在于到最后一步出现确定按钮
2. data
active: 0,
- methods
// 实现新增页面上一页下一页数据绑定
prev() {
--this.active
if (this.active < 0) this.active = 0
},
next() {
if (this.active++ > 3) this.active = 0
},
更多推荐
用ElementUI完成新增或修改时上一页下一页前端实现
发布评论