1 需求:新增修改项内容要实现分页-上下页
- 注意:很多人找不到内容填充在那,一般需要加一个div
页面展示:
模板示例框架链接
1 需求:新增修改项内容要实现分页-上下页
- 注意:很多人找不到内容填充在那,一般需要加一个div
注意:很多人找不到内容填充在那,一般需要加一个div
1 2 3 4 | <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
- 表单里的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <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.com/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> |
注意:我把最后一步中加入
2. data
1 | active: 0, |
- methods
1 2 3 4 5 6 7 8 | // 实现新增页面上一页下一页数据绑定 prev() { --this.active if (this.active < 0) this.active = 0 }, next() { if (this.active++ > 3) this.active = 0 }, |