yujinpan / el-table-infinite-scroll

Infinite scroll for el-table.

el-table-infinite-scroll

Infinite scroll for el-table.

This directive only does event forwarding, which is equivalent to replacing the target DOM of ElInfiniteScroll with the scroll layer of ElTable.

Documentation

https://yujinpan.github.io/el-table-infinite-scroll

vue3 + element-plus

Install

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

Usage

Global register

import { createApp } from "vue";
import App from "./src/App.vue";

import ElTableInfiniteScroll from "el-table-infinite-scroll";

const app = createApp(App);

app.use(ElTableInfiniteScroll);
app.mount("#app");

Component register

<template>
  <el-table v-el-table-infinite-scroll="load"></el-table>
</template>

<script setup>
import { default as vElTableInfiniteScroll } from "el-table-infinite-scroll";
</script>

Example

<template>
  <el-table
    v-el-table-infinite-scroll="load"
    :data="data"
    :infinite-scroll-disabled="disabled"
    height="200px"
  >
    <el-table-column type="index" />
    <el-table-column prop="date" label="date" />
    <el-table-column prop="name" label="name" />
    <el-table-column prop="age" label="age" />
  </el-table>
</template>

<script setup>
import { ref } from "vue";

const dataTemplate = new Array(10).fill({
  date: "2009-01-01",
  name: "Tom",
  age: "30",
});

const data = ref([]);
const disabled = ref(false);
const page = ref(0);
const total = ref(5);

const load = () => {
  if (disabled.value) return;

  page.value++;
  if (page.value <= total.value) {
    data.value = data.value.concat(dataTemplate);
  }

  if (page.value === total.value) {
    disabled.value = true;
  }
};
</script>

Options

Supported element-plus/infinite-scroll all options.

vue2 + element-ui

Install

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

Usage

Global register

import Vue from "vue";

import ElTableInfiniteScroll from "el-table-infinite-scroll";

Vue.directive("el-table-infinite-scroll", ElTableInfiniteScroll);

Component register

<script>
import ElTableInfiniteScroll from "el-table-infinite-scroll";

export default {
  directives: {
    "el-table-infinite-scroll": ElTableInfiniteScroll,
  },
};
</script>

Example

<template>
  <el-table
    v-el-table-infinite-scroll="load"
    :data="data"
    :infinite-scroll-disabled="disabled"
    height="200px"
  >
    <el-table-column type="index" />
    <el-table-column prop="date" label="date" />
    <el-table-column prop="name" label="name" />
    <el-table-column prop="age" label="age" />
  </el-table>
</template>

<script>
const dataTemplate = new Array(10).fill({
  date: "2009-01-01",
  name: "Tom",
  age: "30",
});

export default {
  data() {
    return {
      data: [],
      page: 0,
      total: 5,
    };
  },
  methods: {
    load() {
      if (this.disabled) return;

      this.page++;
      if (this.page <= this.total) {
        this.data = this.data.concat(dataTemplate);
      }

      if (this.page === this.total) {
        this.disabled = true;
      }
    },
  },
};
</script>

Options

Supported element-ui/infinite-scroll all options.

Contribution

Thanks to JetBrains for supporting my free open source license.

el-table-infinite-scroll's Issues

问题

elInserted(scrollElem, binding, ...params);

const { distance, disabled } = getScrollOptions(el, vm);

这时候的getScrollOptions(el, vm); el 传值有误

在使用ajax请求数据异步渲染时会触发两次加载数据方法....

节点能否只保持到10个

el-table__row 能否只保持到 10 个呢？

能 支持大数据里的列嘛？

需求：如题
场景：有一个超多列的表格，每一列是采用render形式渲染的

vue3 无法引入

类型“DirectiveOptions”的参数不能赋给类型“Plugin_2”的参数。

组件unbind报错

unbind报错：

[Vue warn]: Error in directive el-table-infinite-scroll unbind hook: "TypeError: Cannot read property 'container' of undefined"

多次触发回调函数问题

运行环境

"element-ui": "^2.13.2",
"vue": "^2.6.11"

问题

当表格的数据太少，没法超过表格高度时，会重复触发回调函数，直到拼接完后的表格数据超过表格高度

隐藏el-table-infinite-scroll组件时，出现以下error:Error in directive el-table-infinite-scroll unbind hook: "TypeError: Cannot read property 'container' of undefined

Error in directive el-table-infinite-scroll unbind hook: "TypeError: Cannot read property 'container' of undefined

Try to infinite scroll to top, not to bottom

Hi,
Is it possible to inverse this scroll for make infinite scroll to top?
thank you!

data重新赋值，load失效

场景：第一次请求数据设置table data可以实现无线滚动，再次请求数据设置data值，load未生效

Can you support Vue3 in next version?

As the title

为什么设置infinite-scroll-distance不起作用

为什么要设定height为400px？

环境说明

element-ui 2.x
el-table-infinite-scroll: "2.0.0"

问题描述

你好，代码中的这段没理解，为啥一定要设定height，强制设定height为400px，导致在行数少的应用场景下，有一个固定的高度，是否为破坏性变更？为啥不能是maxHeight？

if (!el.style.height) {
        scrollElem.style.height = '400px';
        // eslint-disable-next-line
        console.warn(
          `${msgTitle} el-table height required, otherwise will set default value: 400px`
        );
      }

建议

其次是指令能否对外暴露一个参数，用来处理动态绑定该指令的场景，毕竟该指令适用于数据量大的场景，一两条记录时不需要绑定该指令，从而避免副作用的影响。

inserted(el, binding, VNode, oldVNode) {
    // 补充的代码
    if(!binding.isBind) return 

    const scrollElem: HTMLElement = el.querySelector(elTableScrollWrapperClass);

    if (!scrollElem) {
      throw new Error(
        `${msgTitle}${elTableScrollWrapperClass} element not found.`
      );
    }

    scrollElem.style.overflowY = 'auto';

    // after render
    setTimeout(() => {
      if (!el.style.height) {
        scrollElem.style.height = '400px';
        // eslint-disable-next-line
        console.warn(
          `${msgTitle} el-table height required, otherwise will set default value: 400px`
        );
      }

      syncOptions(el, scrollElem);

      // use `InfiniteScroll`
      InfiniteScroll.inserted(scrollElem, binding, VNode, oldVNode);

      // used by unbind, destroy listener events
      el[elScope] = scrollElem[elScope];
    }, 0);
  },

Failed to fetch dynamically imported module?什么原因呀

局部引入 Failed to fetch dynamically imported module?

组件是好组件 ，联动el-select做筛选有bug

我的问题是 我需要联动我的el-select筛选条件去查询数据，当时滚动到第三页的时候（此时已经发起三次请求列表，pageSize=10，current = 3），当我点击我的el-select查询（需要把列表查询的 currnet = 1），会自动并发三次请求，如何解决？

electron-vue中引入报错

Need an appropriate loader to handle this file type.

Hi，
After I installed the this plugin, I got the following errors. Please help. Thank you!
"el-table-infinite-scroll": "^3.0.1"

error in ./node_modules/el-table-infinite-scroll/node_modules/element-plus/es/components/table/src/util.mjs

Module parse failed: Unexpected token (318:4)
You may need an appropriate loader to handle this file type.
| placement: tooltipOptions.placement || "top",
| strategy: "fixed",
| ...popperOptions,
| modifiers: popperOptions.modifiers ? modifiers.concat(popperOptions.modifiers) : modifiers
| });

横向滚动也触发