How to cancel the strikethrough in Vue Gantt chart

Vue is a popular JavaScript framework with many plugins and libraries that can be used in developing web applications, including a Gantt chart plugin. The Gantt chart is a very common project management tool that provides a visual timeline in which the progress and schedule of a project can be displayed. But sometimes when using the Gantt chart plug-in, strikethrough will appear. This article will introduce how to cancel the strikethrough of the Gantt chart plug-in.

1. Understand the meaning of strikethrough

In a Gantt chart, a strikethrough usually indicates that a task or time period has ended or a certain milestone has been reached. Strikethroughs clearly indicate the status of a task so everyone on the team knows how the project is progressing. However, if you don't want the strikethrough to appear, here's how to cancel it.

2. Using the Gantt chart plug-in in Vue

Using the Gantt chart plug-in in Vue is very simple. You only need to use npm to install the plug-in, and introduce and configure the corresponding components. The following is the basic Vue project structure and sample code on how to install and introduce the Gantt chart plug-in:

<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>

In the above code, we installed the vue-gantt-chart plug-in and Registered as a Vue component. We also define the tasks object, which contains two tasks and their start and end dates. The options object allows us to define the mode and other options of the Gantt diagram.

3. Cancel strikethrough

Now let’s take a look at how to cancel strikethrough. Unstripping is very easy. We just need to set the CSS style representing strikethrough to "none".

The following is a simple CSS stylesheet that cancels the Gantt chart strikethrough:

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

You can include the above CSS stylesheet in your Vue component to cancel the Gantt chart Figure strikethrough. If you only want to unstrikethrough a certain task, you can create a separate CSS class for that task and apply it to the bar chart for that specific task.

For example, if you want to cancel the strikethrough of task 1, you can add the following CSS code in the component:

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

In the above code, we have created a CSS class for task 1 and "task1" is used as the class name. We also set the strikethrough style to "none" using "display:none".

4. Summary

Using the Gantt chart plug-in in Vue is very simple, and canceling the strikethrough is also a breeze. Just set the CSS style that represents strikethrough to "none" to cancel the strikethrough in the Gantt chart. Additionally, you can also unstrikethrough a task by creating a CSS class for that specific task separately, which gives you greater flexibility and control.

The above is the detailed content of How to cancel the strikethrough in Vue Gantt chart. For more information, please follow other related articles on the PHP Chinese website!