Lors de la définition des colonnes, évitez d'utiliser la propriété title. À la place, intégrez l'option slots: { title: 'titrePersonnalise' }, où 'titrePersonnalise' est un identifiant arbitriare.

Insérez ensuite un template correspondant dans votre code :

// L'identifiant du slot doit coïncider avec celui défini dans les slots
<template slot="titrePersonnalise">
 Intitulé de la colonne
 <a-icon type="star-o" /> <!-- Élément personnalisé -->
</template>

2. Configuration du tri sans annulation

Pour supprimer l'optoin d'annulation du tri dans la configuration des colonnes, spécifiez :

// Paramètres de colonne
sortDirections: ['descend', 'ascend', 'descend']

3. Réinitialisation complète de l'état de tri

Pour gérer et effacer l'ensemble des tris actifs, suivez cette implémentation :

// Partie template
<a-table
 :columns="colonnes"
 @change="gererChangementTri"
/>

// Partie logique
computed: {
 colonnes() {
   const { infoTri } = this;
   const etatTri = infoTri || {};
   return [
     {
       cle: 'alpha',
       dataIndex: 'alpha',
       title: 'Pertinence sectorielle',
       sorter: true,
       sortDirections: ['descend', 'ascend'],
       sortOrder: etatTri.columnKey === 'alpha' && etatTri.order
     },
     {
       cle: 'beta',
       dataIndex: 'valeurSuper',
       slots: { title: 'enTeteCustom' },
       scopedSlots: { customRender: 'beta' },
       sorter: true,
       sortDirections: ['descend', 'ascend'],
       sortOrder: etatTri.columnKey === 'beta' && etatTri.order
     }
   ];
 }
},
data() {
 return {
   infoTri: null
 };
},
methods: {
 gererChangementTri(pagination, _, trieur) {
   this.infoTri = trieur;
 }
}

// Pour effacer les tris, réinitialisez l'état, par exemple lors d'un changement d'onglet :
this.infoTri = null;

4. Rendu dynamique avec colonnes opérationnelles

Construisez un tableau avec des colonnes générées dynamiquement et des actions personnalisées :

// Structure du composant
<a-table
 :columns="colonnesConfig"
 :data-source="sourceDonnees"
 :pagination="false"
 :scroll="{ x: 0, y: 222 }"
>
 <template #nom="{ text }">{{ text.prenom }} {{ text.nom }}</template>
 <template #celluleCorps="{ column, record }">
   <template v-if="column.cle === 'actions'">
     <div style="display: flex; gap: 8px;">
       <button class="action-btn">Exécuter</button>
       <button class="action-btn">Modifier</button>
       <button class="action-btn">Supprimer</button>
     </div>
   </template>
 </template>
</a-table>

// Données et configuration
const sourceDonnees = [
 { nom: { prenom: 'Jean', nom: 'Dupont' } },
 { nom: { prenom: 'Marie', nom: 'Curie' } }
];
const colonnesConfig = [
 {
   title: 'Identité',
   dataIndex: 'nom',
   cle: 'nom',
   ellipsis: true
 },
 {
   title: 'Opérations',
   dataIndex: 'actions',
   cle: 'actions'
 }
];

5. Pagination personnalisée avec slots (version 3.3.0+)

Adaptez l'affichage des options de pagination en utilisant le slot buildOptionText :

<a-pagination
 class="pagination"
 show-size-changer
 v-model:current="pageActuelle"
 v-model:pageSize="taillePage"
 :total="totalElements"
 @showSizeChange="surChangementTaille"
 @change="gererChangementPage"
>
 <template #buildOptionText="props">
   <span>{{ props.value }} éléments/page</span>
 </template>
</a-pagination>