Comment optimiser l'affichage du tableau et la fonction de colonne cachée dans le développement Vue

Comment optimiser l'affichage du tableau et la fonction de colonne cachée dans le développement Vue

Dans le développement Vue, le tableau est un composant d'interface utilisateur courant, qui est utilisé pour afficher une grande quantité de données et fournir des fonctions de recherche, de tri, de pagination et d'autres fonctions. L'une des exigences courantes est d'afficher ou de masquer certaines colonnes d'un tableau afin que le contenu affiché du tableau puisse être ajusté dynamiquement en fonction des besoins de l'utilisateur. Cet article expliquera comment optimiser l'affichage des tableaux et la fonction de colonne cachée dans le développement de Vue pour améliorer l'expérience utilisateur et l'efficacité du développement.

1. Utilisez la directive v-if pour afficher ou masquer dynamiquement les colonnes

Vue fournit la directive v-if pour restituer dynamiquement les éléments DOM en fonction des conditions. Nous pouvons afficher ou masquer dynamiquement les colonnes en fonction de la sélection de l'utilisateur à l'aide de la directive v-if. Tout d'abord, définissez un tableau par défaut d'objets colonnes dans le tableau pour contrôler l'état d'affichage de chaque colonne :

data() {
  return {
    columns: [
      { label: '列1', key: 'column1', visible: true },
      { label: '列2', key: 'column2', visible: true },
      { label: '列3', key: 'column3', visible: true },
    ]
  }
},

Utilisez la directive v-if dans th et td du tableau pour décider s'il faut restituer la colonne en fonction de l'attribut visible de l'objet colonne :

<th v-for="column in columns" v-if="column.visible">{{ column.label }}</th>
<td v-for="column in columns" v-if="column.visible">{{ rowData[column.key] }}</td>

Lorsque l'utilisateur choisit de masquer certaines colonnes, il lui suffit de mettre à jour l'attribut visible de la colonne correspondante dans le tableau columns à false pour masquer dynamiquement la colonne.

2. Utilisez le composant checkbox pour contrôler l'affichage et le masquage des colonnes

En plus d'utiliser la directive v-if pour afficher ou masquer dynamiquement les colonnes, nous pouvons également ajouter un composant checkbox pour permettre à l'utilisateur de choisir les colonnes à afficher ou se cacher. Nous pouvons utiliser les données réactives de Vue pour lier l'état sélectionné de la case à cocher afin de contrôler l'affichage ou le masquage des colonnes.

Tout d'abord, ajoutez un composant de case à cocher au tableau :

<input type="checkbox" v-model="showColumn1">显示列1
<input type="checkbox" v-model="showColumn2">显示列2
<input type="checkbox" v-model="showColumn3">显示列3

Ensuite, utilisez les attributs calculés et les directives v-if dans th et td du tableau pour restituer dynamiquement les colonnes en fonction de l'état sélectionné de la case à cocher :

<th v-if="showColumn1">{{ columns[0].label }}</th>
<td v-if="showColumn1">{{ rowData.columns[0].key }}</td>
<th v-if="showColumn2">{{ columns[1].label }}</th>
<td v-if="showColumn2">{{ rowData.columns[1].key }}</td>
<th v-if="showColumn3">{{ columns[2].label }}</th>
<td v-if="showColumn3">{{ rowData.columns[2].key }}</td>

Dans ce méthode , lorsque l'utilisateur choisit d'afficher ou de masquer une colonne, les données de liaison de la case à cocher correspondante seront mises à jour, déclenchant ainsi le recalcul de l'attribut calculé, puis décidant de restituer ou non la colonne correspondante.

3. Utilisez le plug-in vue-tables-2 pour implémenter des fonctions d'affichage et de masquage de colonnes plus avancées

La méthode ci-dessus peut répondre aux besoins de base d'affichage et de masquage de colonnes, mais lorsqu'il y a plus de colonnes à traiter ou que les exigences sont plus complexes, nous pouvons utiliser le plug-in vue -tables-2, qui fournit des fonctions plus puissantes, telles que faire glisser des colonnes pour ajuster l'ordre, geler les colonnes, fusionner les colonnes, etc.

Installez le plug-in vue-tables-2 :

npm install vue-tables-2

Enregistrez le plug-in vue-tables-2 dans Vue :

import { ServerTable, Event } from 'vue-tables-2';

Vue.use(ServerTable, {}, false, 'bootstrap4', 'default');

Utilisez ensuite les composants fournis par le plug-in vue-tables-2 dans le table et configurez les paramètres pertinents :

<server-table :columns="columns" :options="options"></server-table>

...

data() {
  return {
    columns: [
      { name: '列1', title: '列1', visible: true },
      { name: '列2', title: '列2', visible: true },
      { name: '列3', title: '列3', visible: true },
    ],
    options: {
      ...
      columnsDropdown: true,
      columnsDisplay: ['column1', 'column2', 'column3'],
      columnsClasses: {
        column1: 'custom-class',
        column2: 'custom-class',
        column3: 'custom-class',
      },
      customFilters: [' column1', 'column2', 'column3'],
      ...
    }
  }
},

En configurant des paramètres tels que les colonnes et les options, nous pouvons obtenir des fonctions plus avancées d'affichage et de masquage des colonnes, et pouvons ajuster de manière flexible l'ordre d'affichage des colonnes, définir les styles de colonnes, etc.

En optimisant l'affichage des tableaux et la fonction de colonnes cachées dans le développement de Vue, nous pouvons améliorer l'expérience utilisateur et l'efficacité du développement. Les trois méthodes mentionnées ci-dessus ont chacune leurs propres avantages et inconvénients. Choisissez la méthode appropriée en fonction de vos besoins spécifiques pour réaliser la fonction d'affichage et de masquage des colonnes. L'auteur espère aider les lecteurs à mieux gérer le problème de l'affichage et du masquage des colonnes dans les tableaux lors du développement de Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!