el table sticky

el-mesa-pegajoso

Un complemento de conjunto de comandos que se utiliza para implementar el techo del encabezado de la tabla, el techo de la cola de la tabla, el techo inferior de la barra de desplazamiento y las funciones de adaptación de altura de las tablas Element UI (Vue 2).

fondo

Cuando se utiliza el componente de tabla de Element UI, si hay demasiado contenido en la tabla, aparecerán barras de desplazamiento en la tabla, pero el encabezado de la tabla no se moverá a la parte superior y el total de filas al final de la tabla sí. no se mueva al final De esta manera, cuando la tabla tenga demasiado contenido, el encabezado de la tabla y la tabla no se moverán al final. La última fila total se bloqueará. Si hay una barra de desplazamiento horizontal, deberá deslizarse hacia abajo. la parte inferior cada vez que desee desplazarse. Esta serie de puntos débiles afecta en gran medida la experiencia del usuario.

Solución para Element UI : cumpla con los requisitos anteriores configurando el atributo de max-height o height .

Defectos de Element UI : el valor de altura solo admite la configuración de valores numéricos y, en el desarrollo real, a menudo es necesario usar JS para calcularlo.

Para resolver los puntos débiles/necesidades anteriores y reducir los costos de desarrollo y mantenimiento, se creó este complemento. Consulte el análisis de ideas para obtener más detalles.

característica

Algunas instrucciones se basan en position: sticky , por lo que solo son compatibles con navegadores modernos y ejemplos en línea.

• Techo de cabecera de soporte (v-sticky-header)
• Soporte mesa cola fila total succión inferior (v-sticky-footer)
• Admite succión inferior de la barra de desplazamiento horizontal (v-sticky-scroller)
• Soporte adaptable en altura (v-height-adaptative)

Instalar

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

Instrucciones de registro

Instrucciones 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 ,
  }
} )

Instrucciones 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

instrucción	ilustrar	modificador	tipo	valor predeterminado
v-sticky-header	Comando de techo de cabecera	.always	Object{Number, String}	desplazamientoArriba: 0, desplazamientoAbajo: 0
v-sticky-footer	La línea total al final de la tabla es el comando de succión inferior.	.always	Object{Number, String}	desplazamientoInferior: 0
v-sticky-scroller	Comando inferior de la barra de desplazamiento horizontal	.always	Object{Number, String}	desplazamientoInferior: 0
v-height-adaptive	Instrucciones altamente adaptativas	-	Object{Number}	desplazamientoInferior: 0

Cosas a tener en cuenta

• v-sticky-header y v-sticky-footer tienen una función de succión de barra de desplazamiento incorporada, no es necesario reutilizar el comando v-sticky-scroller
• Cuando se utilizan v-sticky-header y v-sticky-footer al mismo tiempo, la barra de desplazamiento offsetBottom se basa en v-sticky-footer
• El modo de visualización predeterminado de la barra de desplazamiento horizontal es hover , que se puede cambiar para mostrar siempre configurando el modificador .always
• La directiva v-height-adaptive no depende de position: sticky y se puede usar solo

Configuración del proyecto

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

Personalice la configuración, consulte la Referencia de configuración.