el table sticky

el-table-pegajoso

Um plug-in de conjunto de comandos usado para implementar o teto do cabeçalho da tabela, o teto final da tabela, o teto inferior da barra de rolagem e as funções adaptativas de altura das tabelas Element UI (Vue 2).

fundo

Quando o componente de tabela do Element UI é usado, se houver muito conteúdo na tabela, barras de rolagem aparecerão na tabela, mas o cabeçalho da tabela não se moverá para o topo e o total de linhas no final da tabela irá não mova para o fundo. Desta forma, quando a tabela contém muito conteúdo, o cabeçalho da tabela e a tabela não serão movidos para o fundo. a parte inferior sempre que você deseja rolar. Essa série de pontos problemáticos afeta muito a experiência do usuário.

Solução para Element UI : atenda aos requisitos acima definindo o atributo max-height ou height .

Deficiências do Element UI : o valor da altura suporta apenas a configuração de valores numéricos e, no desenvolvimento real, muitas vezes é necessário usar JS para calculá-lo.

Para resolver os problemas/necessidades acima e reduzir os custos de desenvolvimento e manutenção, este plug-in foi criado. Consulte a análise da ideia para obter detalhes.

característica

Algumas instruções dependem position: sticky , portanto, suportam apenas navegadores modernos, exemplos online.

• Suporte ao teto do cabeçalho (v-sticky-header)
• Sucção total da parte inferior da linha da cauda da mesa de apoio (v-sticky-footer)
• Suporta sucção inferior da barra de rolagem horizontal (v-sticky-scroller)
• Adaptável à altura do suporte (adaptável à altura v)

Instalar

npm install @cell-x/el-table-sticky

Instruções de registro

Instruções de registro global:

 import elTableSticky from '@cell-x/el-table-sticky'

Vue . use ( elTableSticky )

// 或者

Vue . use ( elTableSticky , {
  StickyHeader : {
    // 吸顶偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetTop : 0 ,
    // 滚动条吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  StickyFooter : {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  StickyScroller : {
    // 吸底偏移量，可以是 CSS 支持的距离值，如 `0px`、`10%`、`calc(100vh - 1rem)` 等
    offsetBottom : 0 ,
  } ,
  HeightAdaptive : {
    // 底部偏移量，只能是数字型
    offsetBottom : 0 ,
  }
} )

Instruções de registro parcial:

 import {
  StickyHeader ,
  StickyFooter ,
  StickyScroller ,
  HeightAdaptive ,
} from '@cell-x/el-table-sticky'

export default {
  directives : {
    StickyHeader : new StickyHeader ( { offsetTop : 0 , offsetBottom : 0 } ) . init ( ) ,
    StickyFooter : new StickyFooter ( { offsetBottom : 0 } ) . init ( ) ,
    StickyScroller : new StickyScroller ( { offsetBottom : 0 } ) . init ( ) ,
    HeightAdaptive : new HeightAdaptive ( { offsetBottom : 0 } ) . init ( ) ,
  }
} 

usar

 < el-table v-sticky-header > ... </ el-table >
< el-table v-sticky-footer > ... </ el-table >
< el-table v-sticky-scroller > ... </ el-table >
< el-table v-height-adaptive > ... </ el-table > 

Parâmetros de comando

instrução	ilustrar	modificador	tipo	valor padrão
v-sticky-header	Comando de teto do cabeçalho	.always	Object{Number, String}	offsetTop: 0, offsetBottom: 0
v-sticky-footer	A linha total no final da tabela é o comando de sucção inferior	.always	Object{Number, String}	deslocamentoInferior: 0
v-sticky-scroller	Comando inferior da barra de rolagem horizontal	.always	Object{Number, String}	deslocamentoInferior: 0
v-height-adaptive	Instruções altamente adaptáveis	-	Object{Number}	deslocamentoInferior: 0

Coisas a serem observadas

• v-sticky-header e v-sticky-footer possuem função de sucção de barra de rolagem integrada, não há necessidade de reutilizar o comando v-sticky-scroller
• Quando v-sticky-header e v-sticky-footer são usados ​​ao mesmo tempo, a barra de rolagem offsetBottom é baseada em v-sticky-footer
• O modo de exibição padrão da barra de rolagem horizontal é hover , que pode ser alterado para exibição sempre definindo o modificador .always
• A diretiva v-height-adaptive não depende position: sticky e pode ser usada sozinha

Configuração do projeto

yarn install
# Compiles and hot-reloads for development
yarn serve
# Compiles and minifies for production
yarn build
# Compiles and minifies for production with demo
yarn build:demo
# Lints and fixes files
yarn lint

Personalize a configuração, consulte Referência de configuração.