hoc element table

@ elemento hoc/tabela

? table com base no Webpack 5, <el-xxx> no Vue 3. Alcançar um maior grau de liberdade visa reduzir operações repetitivas e tornar o desenvolvimento mais eficiente.

Esta biblioteca de componentes pode ser usada para aprendizagem, referência e desenvolvimento secundário

Demonstração ao vivo

Versão

• Versão Vue 3.x | Versão Vue 2.x

Captura de tela

Apoio Ambiental

• Versão 3.2.x

Instalar

npm install @hoc-element/table

# or

pnpm add @hoc-element/table

Início rápido

• Instale o element-plus antes de usar

 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 alterações

As alterações detalhadas de cada versão estão documentadas nas notas de versão

Recurso

• Construído em Webpack 5
• Suporte total para Vue 3
• Suporta configuração rápida de tabelas serializadas JSON
• Pagination é incorporada
• Suporta nomes de colunas prop personalizadas
• Suporta renderização personalizada de conteúdo de célula [consulte instruções de configuração de renderização de célula]
• Suporta style de célula personalizado
• Suporta directives personalizadas vinculativas
• Suporta Events e Methods de ligação de Table nativa element-plus
• Suporte para exibição e controle de ocultação de Header e Pagination

Instruções de configuração de renderização de células

método	ilustrar	cena
---	Renderize o valor-chave correspondente ao attrs.prop da célula	Adequado para exibir diretamente o valor do prop
renderizar	renderizar string	Adequado para cenários onde algum microprocessamento é feito no valor prop padrão.
renderHTML	Renderize o elemento DOM especificado	Adequado para exibir ações, geralmente usadas na última coluna (atualmente suporta apenas renderização do botão el, consulte o exemplo para obter detalhes)
renderComponent	componente de renderização	Adequado para cenários onde conteúdo complexo precisa ser exibido em células, consulte Exemplo para obter detalhes

Exemplo

Este é um exemplo relativamente completo, cobrindo quase todos os usos da API. O código fonte está aqui: Código.

Implantar

Veja repositório? hoc-element-table-build