el table plus

El-Table-plus

Componente de configuração com base na tabela El

Antecedentes: Ao usar o elemento El-Table, você sempre precisa escrever muito código de modelo para tornar a página HTML Code demais. Olhando para a biblioteca de componentes do elemento da camada de aplicativo, embora o design da API seja muito flexível, é muito pesado de usar. Portanto, você precisa embalar a tabela El para simplificar a configuração relacionada.

O design da API da camada de aplicação é melhor. Ao mesmo tempo, todos os atributos/eventos suportam o componente da tabela de elementos originais e não destruirão a API original (sem invasão); renderização de lógica de negócios personalizada;

Caso online

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

Característica

1. Método de uso simples, apenas dados e atributos da coluna são necessários para apoiar
2. Toda a herança, elemento-UI atributo completo/herança de eventos
3. Alta extensão, suporta três maneiras de função slot/jsx/h para personalizar dados de renderização
4. Mais conveniente, expandir o evento de rolagem, componente de paginação, FN EXPREST FORMAT

Instalação e introdução

Instalar

yarn add @springleo/el-table-plus

Introduzir

Este componente depende de componentes da tabela de EL de elemento-Ui e precisa ser introduzido por si só.

 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

Apoie todos os atributos originais na Table El e expanda as seguintes APIs.

parâmetro	tipo	valor padrão	ilustrar
carregando	Booleano	Falso	Carregamento do efeito de movimento
Dados	Variedade	[]	Listar dados
colunas	Variedade	[]	Lista de configuração do item da coluna, consulte as seguintes colunas attrs
paginação	Objeto		A configuração do dispositivo de giro de página não é definida padrão e o dispositivo de giro de página não é exibido. APIs relacionadas para ver El-Paginaton
Total	Número	0	Número total de páginas nas páginas

Evento el-Table-plus

Apoie todos os eventos originais na Table e expanda as seguintes APIs.

Nome do evento	ilustrar	Descrição
Role	Evento da barra de rolamento de mesa	E
Mudança de página	Evento de mudança de personagem	{PageSize, CurrentPage}

atributo de colunas

Apoie a coluna El-Table todos os atributos originais, slots de escopo e expanda a seguinte API ao mesmo tempo:

Attr	Tipo	Padrão	Descrição
rótulo	Corda		Nome da coluna
Propop	Corda		Os campos de dados da coluna suportam ninhos aninhados de várias camadas, como user.email.prefix
escondido	Booleano		Se deve ocultar esta coluna. A recomendação é calculada, para que a tela de resposta possa ser oculta
CustomRender	Função		Renderização de dados de coluna personalizada. Parâmetros de função (valor, linha, coluna, $ index, h), suporte JSX e H função
CustomTitle	Função		Personalizado a renderização da cabeça. Parâmetros de função (coluna, $ index, h), suporta JSX e H função
Scopeedslots	Objeto		Use o método slot para personalizar a renderização para substituir a função CustomRender/CustomTitle. Por exemplo: {CustomRender: 'slotName1', CustomTitle: 'slotName2'}

VUE Plugin Server

Plugin	Status	Descrição
@Springleo/El-Dialog-Helper		Promisify Dialogs in Vue!
@Springleo/El-Table-plus		Componente de configuração com base na tabela El
@Springleo/El-Form-plus		Formulário de esquema base em forma de elemento-ui
@Springleo/Table Virtual-Roll		Componente de mesa de rolamento virtual de tração ilimitado

Licença

Mit