vue jsx table
1.0.0
Exemple de documentation
Ce composant est basé sur le développement secondaire d'element-table et est basé sur l'activité réelle. Il encapsule les fonctions couramment utilisées, génère des tableaux via la configuration et implémente des éléments de développement d'en-tête à plusieurs niveaux , des fonctions d'en-tête personnalisées , etc.
Element-ui doit être introduit dans le projet avant utilisation
npm i vue - jsx - table
import 'vue-jsx-table/dist/vue-jsx-table.css'
import vueJsxTable from 'vue-jsx-table'
Vue . use ( vueJsxTable ) <!-- 引入样式 -->
< link
rel = "stylesheet"
href = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.css"
/>
< ! -- 引入组件库 -- >
< script src = "https://unpkg.com/vue-jsx-table/dist/vue-jsx-table.umd.min.js" > </ script > Les options columns et tableData sont requises pour la configuration des tables.
< vue-jsx-table
: columns = "columns"
: tableData = "tableData"
border
@ selection - change = "selectionChange"
: total = "100"
>
< / vue-jsx-table >
data() {
return {
columns : [
{
type : 'selection' ,
fixed : 'left' ,
selectable : this . rowSelectableHandle ,
} ,
{
label : '年龄' ,
prop : 'age' ,
width : 300 ,
sortable : true ,
} ,
{
label : '学校' ,
prop : 'school' ,
width : 200 ,
} ,
{
label : '学费' ,
prop : 'fee' ,
width : 200 ,
} ,
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} ,
] ,
tableData : [ ]
} ;
} ,Définir les enfants dans une colonne peut afficher l'en-tête du groupe.
{
label : '多级表头' ,
children : [
{
label : '年级' ,
prop : 'grade' ,
width : 120 ,
} ,
{
label : '班级' ,
prop : 'class' ,
} ,
] ,
} , Définir les options de rendu pour la colonne, la fonction (ligne, colonne, $index)
{
label : 'render' ,
prop : 'render' ,
width : 200 ,
render : ( row , column , $index ) => {
return (
< div onClick = { ( ) => this . cellClick ( row , column , $index ) } >
测试render
</ div >
) ;
} ,
} , Il vous suffit de définir type:expand pour l'élément de configuration de la colonne. Le contenu développé peut utiliser slot ou render Si slot et render sont configurés en même temps, slot sera ignoré.
{
type : 'expand' ,
slot : 'expand' ,
} , Il vous suffit de définir solt:'' pour l'élément de configuration de la colonne, et slot est le nom de l'emplacement.
{
label : '编辑' ,
prop : 'edit' ,
slot : 'edit' ,
fixed : 'right' ,
width : 200 ,
} , Il vous suffit de définir renderHeader pour l'élément de configuration de colonne. renderHeader est la configuration native d'element-ui (Officiellement, il n'est pas recommandé d'utiliser la fonction render-header sur la colonne. Il est recommandé d'utiliser des slots !! Il y aura une invite sur la console, embarrassante). Vous pouvez également utiliser des slots en configurant l'élément slotHeader Remarque . que le nom de l'emplacement ne peut pas être répété. Définir La configuration de l'emplacement a été définie dans la déclaration du modèle.
{
label : '自定义表头' ,
prop : 'name' ,
width : 120 ,
sortable : true ,
renderHeader : ( column , scope ) => {
console . log ( 'scope' , scope ) ;
return < span class = "cell-header-red-star" > { column . label } </ span > ;
} ,
} , {
label : '姓名' ,
prop : 'name' ,
slotHeader : 'slotHeader' ,
} ,
<!-- 插槽表头 -->
< template v-slot : slotHeader = "{ column }" >
<!-- {{ scope.column.label }} -->
< span >插槽表头： { { column . label } } </ span >
</ template > < vue-jsx-table
@ page-change = "pageChangeHandle"
: currentPage . sync = "paginationParams.pageNo"
: total = "100"
>
</ vue-jsx-table >
pageChangeHandle ( val ) {
this . paginationParams . pageNo = val . currentPage ;
this . paginationParams . pageSize = val . pageSize ;
} , Grâce au slot solt, vous pouvez également utiliser la fonction de rendu pour restituer les composants
< template v-slot : edit = "{ row }" >
< el-input v-model = "row.name" > </ el-input >
</ template >Tous les attributs de table sont implémentés via v-bind="$attrs", des attributs de table supplémentaires :
| paramètre | illustrer | taper | valeur par défaut |
|---|---|---|---|
| colonnes | colonnes du tableau | Tableau | [] |
| colonnesKeyName | La clé de la colonne. Si vous devez utiliser l'événement de changement de filtre, vous avez besoin de cet attribut pour identifier la colonne dans laquelle se trouve la condition de filtre (clé de colonne des attributs de colonne de table). | chaîne | - |
| aligner | Alignement | Chaîne | gauche |
| showPagination | S'il faut afficher les contrôles de pagination | Booléen | vrai |
| Page actuelle | La page actuelle du contrôle de pagination actuel | Nombre | 1 |
| Tailles de page | pageTailles des contrôles de pagination | Tableau | [10, 20, 30, 50] |
| taille de la page | pageTaille du contrôle de pagination | Tableau | [] |
| mise en page | disposition du contrôle de pagination | Chaîne | 'tailles, précédent, téléavertisseur, suivant, total' |
| total | total de contrôle de pagination | Nombre | 0 |
| Style de pagination | Le style du contrôle de pagination | Objet | - |
| showOverflowTooltip | Affichez l'info-bulle lorsque le contenu est trop long et est masqué. Si la colonne n'est pas configurée séparément avec showOverflowTooltip, utilisez cet attribut. | Booléen | vrai |
| showTableSetting | Afficher les paramètres du tableau | Booléen | FAUX |
| masquer les colonnes | Nom de la colonne et de l'étiquette qui doivent être masqués. Dans certains scénarios, les colonnes masquées doivent être affichées en fonction de certaines conditions. | Tableau | [] |
| Classe personnalisée | Classe de style personnalisé | Tableau | ['vue-jsx-table-wrapper'] |
Tous les événements de table sont implémentés via v-on="$listeners", des événements de table supplémentaires :
| paramètre | illustrer | taper | valeur par défaut |
|---|---|---|---|
| changement de taille | Cet événement sera déclenché par les changements de changement de page et de changement actuel. Il est ajouté pour faciliter les changements de pagination. | Fonction | 'fonction ({pageSize : 10,currentPage : 1,}) {}' |
| changement de taille | Lancé lorsque pageSize change | - | - |
| changement actuel | Lancé lorsque la page actuelle change | - | - |
| paramètre | illustrer | taper | valeur par défaut |
|---|---|---|---|
| soutenir | Le nom du champ correspondant au contenu de la colonne | chaîne | - |
| fente | Le nom d'emplacement de la colonne (notez que si la table est imbriquée, le nom d'emplacement ne peut pas être répété, portée de l'emplacement ({ row, $index })) | chaîne | - |
| étiquette | Titre affiché | chaîne | - |
| largeur | Largeur de colonne correspondante | Nombre | - |
| showOverflowTooltip | Afficher une info-bulle lorsque le contenu est trop long et masqué | Booléen | - |
| fixé | Que la colonne soit fixée à gauche ou à droite (true, gauche, droite), true signifie fixée à gauche | chaîne, booléen | - |
| rendre | fonction de rendu jsx | fonction | rendu (ligne, colonne, $index) |
| taper | sélection/index/développer | chaîne | - |
| En-tête de rendu | Fonction utilisée pour l'en-tête du tableau, le titre de la colonne, le rendu de la zone d'étiquette | Function(column, scope }), column est l'élément de configuration et scope est la portée du composant natif. (Cet attribut n'est pas un paramètre natif) | - |
| celluleredstar | S'il faut mettre une étoile rouge avant le texte d'en-tête | Booléen | FAUX |
| triable | Si la colonne correspondante peut être triée. Si la valeur est « personnalisée », cela signifie que l'utilisateur souhaite trier à distance et doit écouter l'événement de changement de tri de la table. | booléen, chaîne (vrai, faux, 'personnalisé') | FAUX |
| formateur | Utilisé pour formater le contenu (attribut d'origine element-ui) | Fonction (ligne, colonne, cellValue, index) | - |
| sélectionnable | Il n'est valide que pour les colonnes avec type=selection. Le type est Function. La valeur de retour de Function est utilisée pour déterminer si le CheckBox de cette ligne peut être vérifié. | Fonction (ligne, index) | - |
| showHeaderTooltip | Si les informations d'invite de copie s'affichent lorsque la souris est déplacée vers l'en-tête du tableau | Booléen | - |
| headerTooltipText | L'en-tête affiche le contenu des informations de copie | Chaîne | - |
