el-timeline实现下拉加载
<div style="height: 600px; overflow: auto"> <el-timeline v-if="operationData.length > 0" v-infinite-scroll="load" style="overflow: auto" > <el-timeline-item v-for="(operation, index) in operationData" style="overflow: auto" :key="index" :icon="operation.icon" :type="operation.type" :color="operation.color" :size="operation.size" > <div class="flexDiv"> <div> <div style="display: flex"> <p style="margin-right: 10px">{{ operation.activityName }}</p> <p>{{ formateStatus(operation.approveStatus) }}</p> </div> <p>{{ operation.operator }}</p> </div> <div class="detailDiv"> <p> {{ formate(operation.createTime) }} </p> <p class="underline" @click="detailInfo(operation)">查看详情</p> </div> </div> </el-timeline-item> </el-timeline> <div v-if="finish" style=" font-size: 16px; color: #666666; margin-bottom: 30px; text-align: center; " > 没有数据了 (。・ω・。) </div> </div>
getOperationData() { postToken(selectCompanyActivityRecord, { companyCode: this.trData.companyCode, page: this.page, size: this.size, }).then((res) => { // console.log(res, "公司操作详情"); if (res.data.status == 1) { this.total = res.data.total; // console.log(this.total, "公司操作详情total"); this.operationData = this.operationData.concat(res.data.rows); } else { this.$message.error(res.data.msg); } }); },
load() { // console.log(this.page, "加载"); this.page++; let totalPage = Math.ceil(this.total / this.size); if (this.page > totalPage) { if (this.operationData.length == 0) { this.finish = false; } else { this.finish = true; } return; } else { this.finish = false; } this.getOperationData(); },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现