el table plus

El-Table-plus

Composant de configuration basé sur El-Table

Contexte: Lorsque vous utilisez Element El-Table, vous devez toujours écrire trop de code de modèle de modèle pour rendre le code HTML de page trop. En regardant la bibliothèque des composants d'élément à partir de la couche d'application, bien que la conception de l'API soit très flexible, il est très lourd à utiliser. Par conséquent, vous devez emballer EL-Table pour simplifier la configuration associée.

La conception de l'API de la couche d'application est meilleure. En même temps, tous les attributs / événements prennent en charge le composant de la table d'élément d'origine et ne détruisent pas l'API d'origine (pas d'invasion); Rendu logique commercial personnalisé;

Cas en ligne

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

Caractéristiques

1. Méthode d'utilisation simple, seules les données et les attributs de colonne sont nécessaires pour prendre en charge
2. Tout héritage, Élément-UI Attribut complet / héritage d'événements
3. Extension élevée, prend en charge trois façons de la fonction Slot / JSX / H pour personnaliser les données de rendu
4. Plus pratique, élargissez l'événement de défilement, composant de pagination, format FN Express

Installation et introduction

Installer

yarn add @springleo/el-table-plus

Introduire

Ce composant repose sur des composants EL-Table de l'élément-UI et doit être introduit par lui-même.

 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 ) 

Utilisation de base

 < 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

Attribut el-table-plus

Soutenez tous les attributs d'origine sur EL-Table et développez les API suivantes.

paramètre	taper	valeur par défaut	illustrer
chargement	Booléen	FAUX	Chargement de l'effet de mouvement
Données	Tableau	[]	Répertorier les données
colonnes	Tableau	[]	Liste de configuration de l'élément de colonne, voir les colonnes suivantes
pagination	Objet		La configuration du périphérique de tournage de la page n'est pas définie par défaut et le périphérique de virage de la page ne s'affiche pas. API connexes pour voir El-Paginaton
Total	Nombre	0	Nombre total de pages sur des pages

El-Table-Plus Event

Soutenez tous les événements originaux sur EL-Table et développez les API suivantes.

Nom de l'événement	illustrer	Description
rouleau	Événement de barre de table	E
Changement de page	Événement de changement de caractère	{Pagesize, currentpage}

Attribut des colonnes

Prise en charge de la colonne El-Table Tous les attributs d'origine, des machines à sous portée et élargissez l'API suivante en même temps:

Att	Taper	Défaut	Description
étiquette	Chaîne		Nom de colonne
properte	Chaîne		Les champs de données de colonne prennent en charge les nicheurs imbriqués multi-ulants, tels que user.email.prefix
caché	Booléen		S'il faut masquer cette colonne. La recommandation est calculée, afin que l'affichage de la réponse puisse être caché
Doublé	Fonction		Rendu de données de colonne personnalisé. Paramètres de fonction (valeur, ligne, colonne, $ index, h), prise en charge de la fonction JSX et H
Coutume	Fonction		Personnalisé le rendu de la tête. Paramètres de fonction (colonne, $ index, h), prise en charge de la fonction JSX et H
ScopeedSlots	Objet		Utilisez la méthode de l'emplacement pour personnaliser le rendu pour remplacer la fonction CustomAnder / Customtitle. Par exemple: {CustomRender: 'Slotname1', CustomTitle: 'Slotname2'}

Vue Plugin Server

Plugin	Statut	Description
@ Springleo / el-dialog-helper		Promeifier les boîtes de dialogue en Vue!
@ Springleo / El-Table-Plus		Composant de configuration basé sur El-Table
@ Springleo / El-Form-Plus		Formulaire de schéma Base sur l'élément-UI Form
@ Springleo / Virtual-Scroll-Table		Composant de la table de roulement virtuel de traction de traction illimitée

Licence

Mit