当前位置:   article > 正文

(vue3)el-table滚到底部加载数据el-table-infinite-scroll_vue3监听el-table的滚动事件,滚动到底部加载更多数据

vue3监听el-table的滚动事件,滚动到底部加载更多数据

下载插件

npm install --save el-table-infinite-scroll

全局

  1. import { createApp } from "vue";
  2. import App from "./src/App.vue";
  3. import ElTableInfiniteScroll from "el-table-infinite-scroll";
  4. const app = createApp(App);
  5. app.use(ElTableInfiniteScroll);
  6. app.mount("#app");

局部

  1. <template>
  2. <el-table v-el-table-infinite-scroll="load"></el-table>
  3. </template>
  4. <script setup>
  5. import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
  6. </script>

el-table实现

  1. <template>
  2. <p style="margin-bottom: 8px">
  3. <span>loaded page(total: {{ total }}): {{ page }}, </span>
  4. disabled:
  5. <el-switch v-model="disabled" :disabled="page >= total"></el-switch>
  6. </p>
  7. <el-table
  8. v-el-table-infinite-scroll="loadMore"
  9. :data="data"
  10. :infinite-scroll-disabled="disabled"
  11. height="200px"
  12. >
  13. <el-table-column type="index" />
  14. ...
  15. </el-table>
  16. </template>
  17. <script setup>
  18. import { ref } from 'vue';
  19. const dataTemplate = new Array(10).fill({
  20. date: '2009-01-01',
  21. name: 'Tom',
  22. age: '30',
  23. });
  24. const data = ref([]);
  25. const disabled = ref(false);
  26. const page = ref(0);
  27. const total = ref(5);
  28. const loadMore= () => {
  29. if (disabled.value) return;
  30. page.value++;
  31. if (page.value <= total.value) {
  32. data.value = data.value.concat(dataTemplate);
  33. }
  34. if (page.value === total.value) {
  35. disabled.value = true;
  36. }
  37. };
  38. </script>
  39. <style lang="scss" scoped>
  40. .el-table {
  41. :deep(table) {
  42. margin: 0;
  43. }
  44. }
  45. </style>

原文链接 vue3 | el-table-infinite-scroll

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/873333
推荐阅读
相关标签
  

闽ICP备14008679号