el table plus

el-table-plus

Componentes configurables basados ​​en el-table

Antecedentes: cuando se utiliza el elemento el-table, se debe escribir demasiado código de plantilla, lo que genera demasiado código HTML en la página. Mirando la biblioteca de componentes de elementos desde la capa de aplicación, aunque el diseño de la API es muy flexible, su uso es muy complicado. Por lo tanto, es necesario empaquetar el-table para simplificar las configuraciones relacionadas.

El diseño de API de la capa de aplicación es relativamente bueno. Recomendamos la tabla antd-design-vue. El diseño de API el-table-plus se refiere al componente de tabla antd-design-vue. La representación subyacente todavía usa el componente de tabla element-ui. Al mismo tiempo, todos los atributos/eventos admiten el componente de tabla de elementos original, que no destruirá la API original (sin intrusión, también admite la función slot/jsx/h para personalizar la representación de los datos de la columna de tres maneras para lograr una personalización); representación de lógica de negocios; también está integrada. Los componentes de paginación de uso común y las API extendidas ayudan a manejar negocios comunes de manera conveniente.

Caso en línea

https://lq782655835.github.io/el-table-plus

Características

1. Uso simple, solo se necesitan dos atributos, datos y columnas para admitir
2. Herencia completa, herencia completa de eventos/atributos element-ui
3. Altamente escalable, admite la función slot/jsx/h para personalizar los datos de la columna de representación de tres maneras
4. Más conveniente, expandir evento de desplazamiento, componente de paginación, formato rápido fn

Instalación e introducción

Instalar

yarn add @springleo/el-table-plus

introducir

Este componente depende del componente el-table de element-ui y debe introducirlo usted mismo.

 import ElementUI from "element-ui" ;
import "element-ui/lib/theme-chalk/index.css" ;
Vue . use ( ElementUI ) ;

import ElTablePlus from '@springleo/el-table-plus'
Vue . use ( ElTablePlus ) 

Uso básico

 < template >
    < el-table-plus
      :data =" list "
      :columns =" [
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ] "
    />
</ template > 

API

atributo el-table-plus

Admite todos los atributos originales en el-table y amplía las siguientes API.

parámetro	tipo	valor predeterminado	ilustrar
cargando	Booleano	FALSO	Cargando animación
datos	Formación	[]	Lista de datos
columnas	Formación	[]	Lista de configuración de elementos de columna; consulte los atributos de las columnas a continuación para obtener más detalles
paginación	Objeto		Configuración de cambio de página, no configurada de forma predeterminada, no se mostrará el cambio de página. Las API relacionadas se pueden encontrar en el-pagination
total	Número	0	Número total de personas que pasan páginas

evento el-table-plus

Admite todos los eventos originales en el-table y amplía las siguientes API.

nombre del evento	ilustrar	Descripción
voluta	evento de barra de desplazamiento de tabla	mi
cambio de página	Evento de cambio de página	{ tamaño de página, página actual }

atributo de columnas

Admite todos los atributos originales y la ranura con alcance de el-table-column y amplía las siguientes API:

Atributo	Tipo	Por defecto	Descripción
etiqueta	Cadena		Nombre de columna
apuntalar	Cadena		Los campos de datos de columna admiten el anidamiento de objetos de varios niveles, como user.email.prefix
oculto	Booleano		Si se debe ocultar esta columna. La sugerencia es computarizada y permite mostrar y ocultar con capacidad de respuesta.
renderizado personalizado	Función		Representación de datos de columnas personalizadas. Parámetros de función (valor, fila, columna, $index, h), admiten funciones jsx y h
título personalizado	Función		Representación de encabezado de columna personalizada. Parámetros de función (columna, $index, h), admiten funciones jsx y h
Ranuras con alcance	Objeto		Utilice el modo de ranura para personalizar la representación y reemplazar la función customRender/customTitle. Por ejemplo: { customRender: 'slotName1', customTitle: 'slotName2' }

Serie de complementos de Vue

Complemento	Estado	Descripción
@springleo/el-dialog-helper		¡Promisifica los diálogos en Vue!
@springleo/el-table-plus		Componentes configurables basados ​​en el-table
@springleo/el-form-plus		formulario de esquema basado en el formulario element-ui
@springleo/mesa-de-desplazamiento-virtual		Componente de tabla de desplazamiento virtual desplegable infinito

Licencia

MIT