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();
    },
复制代码

 

posted @   崛起崛起  阅读(432)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示