Comment annuler le barré dans le diagramme de Gantt Vue

Vue est un framework JavaScript populaire avec de nombreux plugins et bibliothèques qui peuvent être utilisés dans le développement d'applications Web, y compris un plugin de diagramme de Gantt. Le diagramme de Gantt est un outil de gestion de projet très courant qui fournit une chronologie visuelle dans laquelle l'avancement et le calendrier d'un projet peuvent être affichés. Mais parfois, lors de l'utilisation du plug-in de diagramme de Gantt, un barré apparaît. Cet article explique comment annuler le barré du plug-in de diagramme de Gantt.

1. Comprenez la signification du barré

Dans un diagramme de Gantt, un barré indique généralement qu'une tâche ou une période de temps est terminée ou qu'un certain jalon a été atteint. Les caractères barrés indiquent clairement l'état d'une tâche afin que tous les membres de l'équipe sachent comment le projet progresse. Toutefois, si vous ne souhaitez pas que le barré apparaisse, voici comment l'annuler.

2. Utiliser le plugin de diagramme de Gantt dans Vue

L'utilisation du plugin de diagramme de Gantt dans Vue est très simple. Il vous suffit d'utiliser npm pour installer le plug-in, puis d'introduire et de configurer les composants correspondants. Voici la structure de base du projet Vue et un exemple de code sur la façon d'installer et d'introduire le plugin de diagramme de Gantt :

<template>
  <div>
    <gantt-chart :tasks="tasks" :options="options" />
  </div>
</template>

<script>
import GanttChart from 'vue-gantt-chart';

export default {
  name: 'App',
  components: {
    GanttChart
  },
  data() {
    return {
      tasks: [
        {
          name: '任务1',
          start: '2022-02-01',
          end: '2022-02-03'
        },
        {
          name: '任务2',
          start: '2022-02-03',
          end: '2022-02-05'
        }
      ],
      options: {
        mode: 'day',
        showLastLine: true
      }
    };
  }
};
</script>

Dans le code ci-dessus, nous avons installé le plugin vue-gantt-chart et l'avons enregistré en tant que composant Vue. Nous définissons également l'objet tâches, qui contient deux tâches et leurs dates de début et de fin. L'objet options nous permet de définir le mode et d'autres options du diagramme de Gantt.

3. Annuler la frappe

Voyons maintenant comment annuler la frappe. Le décapage est très simple. Il nous suffit de définir le style CSS représentant le barré sur "aucun".

Ce qui suit est une simple feuille de style CSS qui annule le barré du diagramme de Gantt :

.gantt .bar-line {
  display: none;
}

Vous pouvez inclure la feuille de style CSS ci-dessus dans votre composant Vue pour annuler le barré du diagramme de Gantt. Si vous souhaitez uniquement supprimer le barré pour une certaine tâche, vous pouvez créer une classe CSS distincte pour cette tâche et l'appliquer au graphique à barres de cette tâche spécifique.

Par exemple, si vous souhaitez annuler le barré de la tâche 1, vous pouvez ajouter le code CSS suivant dans le composant :

.gantt .task.task1 .bar-line {
  display: none;
}

Dans le code ci-dessus, nous avons créé une classe CSS pour la tâche 1 et utilisé "task1" comme le nom de la classe. Nous définissons également le style barré sur "aucun" en utilisant "display:none".

4. Résumé

L'utilisation du plugin de diagramme de Gantt dans Vue est très simple, et supprimer le barré est un jeu d'enfant. Définissez simplement le style CSS qui représente le barré sur "aucun" pour annuler le barré dans le diagramme de Gantt. De plus, vous pouvez également annuler la suppression d'une tâche en créant séparément une classe CSS pour cette tâche spécifique, ce qui vous offre une plus grande flexibilité et un plus grand contrôle.

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!