ele easy table
1.0.0
npm install ele-easy-table -S
import 'ele-easy-table'
<ele-easy-table :form="form" :table="table" :formData.sync="formData" @getList="handleSearch"></ele-easy-table>
Voir le code source de la démo pour plus de détails
Dépend d'element-ui, votre projet doit installer element-ui
Version Element-ui utilisée par le code source
"element-ui": "^2.4.5"
| propriété | illustrer | taper | valeur par défaut |
|---|---|---|---|
| formulaire | Zone de condition de requête de table | Objet | {} |
| tableau | Zone d'affichage du tableau | Objet | {} |
| formData.sync | champs de requête du formulaire | Objet | {} |
| pagination | S'il faut afficher la zone de pagination | [Booléen,Objet] | vrai |
| d'autres attributs | propriétés natives de la table el | Reportez-vous aux propriétés natives de la table el-table | - |
| propriété | illustrer | taper | valeur par défaut | Remarque |
|---|---|---|---|---|
| classe | Paramètre de style de zone de condition de requête de table | Objet | - | - |
| style | Paramètre de style en ligne de la zone de condition de requête de table | Objet | - | - |
| nombre de plis | La table s'effondre lorsqu'il y a plus de nombreuses conditions de requête | Nombre | - | Sans ce paramètre, tout sera affiché |
| liste | Liste des conditions de requête de table | Tableau | - | Voir le code source de la démo pour plus de détails |
| propriété | illustrer | taper | valeur par défaut | Remarque |
|---|---|---|---|---|
| liste | Liste des données du tableau | Tableau | - | - |
| colonnes | Liste des en-têtes de tableau | Tableau | - | Voir le code source de la démo pour plus de détails |
| est en cours de chargement | S'il faut afficher l'animation de chargement de table | Booléen | - | |
| showIndex | S'il faut afficher la colonne du numéro de série | Booléen | vrai | |
| indexFixe | S'il faut corriger la colonne du numéro de série | Booléen | FAUX | |
| indexLabel | Personnaliser le texte d'en-tête de la liste des numéros de série | Chaîne | numéro de série | |
| sélection | Former une configuration à sélection multiple | Objet | {} |
| propriété | illustrer | taper | valeur par défaut | Remarque |
|---|---|---|---|---|
| configuration | Former plusieurs propriétés de sélection | Objet | - | - |
attribut natif el-pagination
Exécuté lorsque le numéro de page change ou que le numéro affiché sur chaque page change, les données sont obtenues, puis affectées à table.list pour mettre à jour la liste.
Événements natifs el-table, par exemple : @selection-change="handleSelectionChange" Voir le code source de la démo pour plus de détails
| événement | illustrer | paramètre |
|---|---|---|
| handleAgrandir | Événement de rappel après pliage conditionnel | estDévelopper |
Le tableau a un nouveau débordement de style en ligne : visible ; pour implémenter une disposition collante de l'en-tête du tableau, ajoutez simplement le style suivant
Remarque : S'il s'agit d'un style étendu, vous devez utiliser l'opérateur >>> (voir la portée CSS du document pour plus de détails)
/* 全局样式 */
. el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}
/* scoped 局部样式 */
. ele-easy-table-demo > > > . el-table__header-wrapper {
position : sticky;
top : 0 ;
z-index : 999 ;
}Voir le code source de la démo pour plus de détails
Remarque : Il ne peut pas être utilisé avec la fixation de colonnes en même temps. Pour l'utiliser en même temps, vous pouvez utiliser l'attribut de table natif de l'élément pour définir la hauteur de la table. Il n'est pas nécessaire de définir ce style.
