element ui中Timeline时间线结合InfiniteScroll 无限滚动展示数据

weixin_42820161

已于 2023-06-13 11:24:56 修改

阅读量1.8k

点赞数

文章标签： vue elementui

于 2023-06-13 11:07:10 首次发布

本文链接：https://blog.csdn.net/weixin_42820161/article/details/131184252

版权

该代码片段展示了一个使用Vue.js和ElementUI库创建的时间线组件，具有无限滚动功能。当用户滚动到底部时，通过axios获取更多数据并更新dataList，实现动态加载。同时，实现了分页功能，根据总条数和每页显示数量计算总页数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
      <el-timeline
        v-infinite-scroll="load"
        style="overflow: auto">
        <el-timeline-item :timestamp="item.craeteDate" placement="top" v-for="(item,index) in dataList" :key="index">
          <el-card>
            <h4>{{item.title}}</h4>
            <p>{{item.content}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div style="font-size: 16px;
            color: #666666;
            margin-bottom: 30px;
            text-align: center;">
        暂无数据
      </div>
  </div>
</template>

<script>
export default {
  name: 'wel',
  data() {
    return {
      finish: false,
      dataList:[],
      page: {
        total: 0, // 总条数
        current: 1,// 当前页数,
        size: 10 // 每页显示多少条
      }
    }
  },
  created() {
    this.getDataList()
  },
  methods:{
    getDataList() {
      getDataList(this.page).then(response => {
        this.dataList= this.dataList.concat(response.data.data.records);
        this.page.total = response.data.data.total;
      }).catch((e) => {

      });
    },
    load() {
      //延迟1s执行 保证getDataList执行完毕 能取到总条数
      setTimeout(()=>{
        this.page.current=this.page.current+1;
        let totalPage = Math.ceil(this.page.total / this.page.size);
        if (this.page.current > totalPage) {
          if (this.dataList.length == 0) {
            this.finish = false;
          } else {
            this.finish = true;
          }
          return;
        } else {
          this.finish = false;
        }
        this.getDataList();
      },1000)
    }
  }
}

</script>