hoc element table

@ elemento-hoc/tabla

? table sobre la base de Webpack 5, <el-xxx> en Vue 3. Lograr un mayor grado de libertad tiene como objetivo reducir las operaciones repetitivas y hacer que el desarrollo sea más eficiente.

Esta biblioteca de componentes se puede utilizar para aprendizaje, referencia y desarrollo secundario.

Demostración en vivo

Versión

• Versión Vue 3.x | Versión Vue 2.x

Captura de pantalla

Soporte Medioambiental

• Vista 3.2.x

Instalar

npm install @hoc-element/table

# or

pnpm add @hoc-element/table

Inicio rápido

• Instale element-plus antes de usarlo

 import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import HocElTable from '@hoc-element/table'
import App from './App.vue'

createApp ( App )
  . use ( ElementPlus )
  . use ( HocElTable )
  . mount ( '#app' ) 

Registro de cambios

Los cambios detallados para cada versión están documentados en las notas de la versión.

Característica

• Construido en Webpack 5
• Soporte completo para Vue 3
• Admite configuración rápida de tablas serializadas JSON
• Pagination está integrada.
• Admite nombres de columnas prop personalizados
• Admite la representación personalizada del contenido de la celda [consulte las instrucciones de configuración de la representación de la celda]
• Admite style de celda personalizado
• Admite directives personalizadas vinculantes
• Admite Events y Methods vinculantes de Table nativa element-plus
• Admite control de visualización y ocultación de Header y Pagination

Instrucciones de configuración de renderizado de celdas

método	ilustrar	escena
---	Representa el valor clave correspondiente al attrs.prop de la celda.	Adecuado para mostrar directamente el valor de la propiedad.
prestar	renderizar cadena	Adecuado para escenarios en los que se realiza algún microprocesamiento en el valor de propiedad predeterminado.
renderHTML	Representar el elemento DOM especificado	Adecuado para mostrar Acción, generalmente se usa en la última columna (actualmente solo admite la representación del botón El, consulte el Ejemplo para obtener más detalles)
renderComponente	componente de renderizado	Adecuado para escenarios en los que es necesario mostrar contenido complejo en celdas; consulte el ejemplo para obtener más detalles.

Ejemplo

Este es un ejemplo relativamente completo que cubre casi todos los usos de la API. El código fuente está aquí: Código.

Desplegar

¿Ver repositorio?