Composants nécessaires

Pour créer une table paginée avec Element-UI, utilisez les composants el-table et el-pagination. Consultez la documentation officielle d'Element-UI pour plus de détails.

Installation d'Element-UI

Pour intégrer Element-UI dans votre projet Vue.js, exécutez la commande suivante dans votre terminal :

yarn add element-ui

Importation d'Element-UI

Vous pouvez importer Element-UI de manière complète ou sélective. L'importation sélective est recomandée pour optimiser la taille du bundle.

Importation complète

Ajoutez ce code dans votre fichier prnicipal, par exemple main.js :

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Importation sélective

Pour importer uniquement les composants nécessaires, installez d'abord le plugin Babel :

npm install babel-plugin-component --save-dev

Modifiez ensuite le fichier de configuration Babel (par exemple .babelrc) :

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Exemple d'importation sélective pour les composants Table et Pagination :

import Vue from 'vue';
import { Table, Pagination } from 'element-ui';
import App from './App.vue';

Vue.component(Table.name, Table);
Vue.component(Pagination.name, Pagination);

new Vue({
  el: '#app',
  render: h => h(App)
});

Création de la table côté client

Voici un exemple de code Vue pour afficher une table avec des données de démosntration :

<template>
  <div class="container">
    <el-table :data="listeArticles" stripe style="width: 100%">
      <el-table-column prop="jour" label="Jour" width="150"></el-table-column>
      <el-table-column prop="titre" label="Titre" width="200"></el-table-column>
      <el-table-column prop="contenu" label="Contenu"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'TableDemo',
  data() {
    return {
      listeArticles: [
        { jour: '2023-01-10', titre: 'Introduction à Vue', contenu: 'Contenu de base sur Vue.js' },
        { jour: '2023-01-12', titre: 'Avancé avec Vuex', contenu: 'Gestion d\'état avancée' },
        { jour: '2023-01-15', titre: 'Tests unitaires', contenu: 'Méthodologies de test' },
        { jour: '2023-01-18', titre: 'Déploiement', contenu: 'Processus de mise en production' }
      ]
    };
  }
};
</script>

Ajout de la pagination

Intégrez le composant de pagination en dessous de la table pour permettre la navigation entre les pages :

<el-pagination
  @size-change="modifierTaillePage"
  @current-change="modifierPageCourante"
  :current-page="pageActive"
  :page-sizes="[5, 10, 20, 50]"
  :page-size="5"
  layout="total, sizes, prev, pager, next, jumper"
  :total="100"
></el-pagination>

Explication des attributs :

• :current-page : indique le numéro de la page actuelle.
• :page-sizes : définit les options pour le nombre d'éléments par page.
• :page-size : spécifie le nombre d'éléments affichés par page.
• layout : détermine les éléments affichés dans la barre de pagination (ex. "total" pour le total, "next" pour la page suivante).
• :total : représente le nombre total d'éléments à paginer.

Ajoutez les méthodes correspondantes dans la section methods du composant :

methods: {
  modifierTaillePage(nouvelleTaille) {
    console.log(`Nombre d'éléments par page : ${nouvelleTaille}`);
    // Logique pour mettre à jour la taille de page
  },
  modifierPageCourante(numeroPage) {
    console.log(`Page courante : ${numeroPage}`);
    // Logique pour charger les données de la page
  }
}

Pour personnaliser l'apparence de la pagination, vous pouvez utiliser des styles CSS globaux ou locaux. Si nécessaire, employez des sélecteurs profonds comme ::v-deep dans les composants Vue pour surcharger les styles d'Element-UI.