element ui 无限滚动--demo

一顿吃三个小盆友

已于 2023-04-26 09:19:58 修改

阅读量358

点赞数

文章标签： elementui vue

于 2022-05-16 14:34:58 首次发布

本文链接：https://blog.csdn.net/m0_59941214/article/details/124798455

版权

记得给父级给"高度"

<template>
  <div class="mk" style="overflow: auto">
    <div class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div v-for="i in count" :key="i" class="li"> {{ i }}</div>
    </div>
    <p v-if="loading" style="text-align: center">加载中...</p>
    <p v-if="noMore" style="text-align: center">没有更多了</p>
  </div>
</template>

<script lang="js">

export default {

  data() {

    return {
      count: 0,
      loading: false,

    };

  },
  mounted() {
    this.count = 6
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },

    disabled() {
      return this.loading || this.noMore;
    },

  },

  methods: {
    load() {
      console.log(1111);
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);

    },

  },

};

</script>

<style scoped>
.mk {

  width: 100%;

  height: 60vh;
  background-color: #9f2828;

}

.list {

  width: 100%;

}

.li {

  margin-top: 20px;

  width: 100%;

  height: 100px;

  background-color: rgb(166, 65, 65);

}
</style>

添加接口，简单实例

<template>
  <div class="mk" style="overflow: auto">
    <div class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div v-for="(item, index) in tableData" :key="index" class="li"> {{ index + 1 }}</div>
    </div>
    <p v-if="loading" style="text-align: center">加载中...</p>
    <p v-if="noMore" style="text-align: center">没有更多了</p>
  </div>
</template>
 
<script lang="js" >

export default {

  data() {
    return {
      count: 0,
      loading: false,
      currentPage: 1,
      pagesize: 5,
      total: 0,//总数
      tableData: []
    };

  },
  mounted() {
    this.loadTableData()
  },
  computed: {
    noMore() {
      return this.currentPage >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    },

  },

  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.currentPage += 5;//触发加5
        this.loadTableData();
      }, 2000);
    },
    loadTableData: async function () {
      let _self = this;
      let from = (_self.currentPage - 1) * _self.pagesize;//0，5，10，15，20
      let to = _self.pagesize;
      let params = {
        from: from,
        to: to,
      };
      try {
        let { data } = await _self.$http({
          method: "get",
          url: "/getInstallUserinfoManageList",
          params: params,
        });
        if (data.result === "success") {
          if (data.data.length) {
            this.tableData = _self.tableData.concat(data.data);
            this.total = data.count//总数
            this.loading = false;
          }
        } else {
          this.loading = false;
          _self.$message({
            type: "error",
            message: data.error,
          });
        }
      } catch (err) {
        this.loading = false;
        _self.$message({
          type: "error",
          message: err,
        });
      }
    },

  },

};

</script>
 
<style scoped>
.mk {
  width: 100%;
  height: 60vh;
}

.list {

  width: 100%;

}

.li {

  margin-top: 20px;

  width: 100%;

  height: 100px;

  background-color: rgb(166, 65, 65);

}
</style>