el table infinite scroll

el-table-infinite-scroll

Rolagem infinita para el-table.

Esta diretiva apenas encaminha eventos, o que equivale a substituir o DOM de destino de ElInfiniteScroll pela camada de rolagem de ElTable .

Documentação

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

vue3 + elemento-mais

Instalar

** Versão >= 3 **

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

Uso

Registro global

 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" ) ; 

Registro de componentes

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

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

Exemplo

< 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 >

Opções

Todas as opções de element-plus/infinite-scroll suportadas.

vue2 + elemento-ui

Instalar

** Versão ^ 2 **

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

Uso

Registro global

 import Vue from "vue" ;

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

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

Registro de componentes

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

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

Exemplo

< 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 >

Opções

Todas as opções de element-ui/infinite-scroll suportadas.

Contribuição

Obrigado à JetBrains por apoiar minha licença gratuita de código aberto.