Cara membatalkan coretan dalam carta Vue Gantt

Vue ialah rangka kerja JavaScript yang popular dengan banyak pemalam dan perpustakaan yang boleh digunakan dalam membangunkan aplikasi web, termasuk pemalam carta Gantt. Carta Gantt ialah alat pengurusan projek yang sangat biasa yang menyediakan garis masa visual di mana kemajuan dan jadual projek boleh dipaparkan. Tetapi kadangkala apabila menggunakan pemalam carta Gantt, coretan akan dipaparkan Artikel ini akan memperkenalkan cara membatalkan pemalam carta Gantt.

1. Fahami maksud coretan

Dalam carta Gantt, coretan biasanya menunjukkan bahawa tugas atau tempoh masa telah tamat atau pencapaian tertentu telah dicapai. Garis tembus jelas menunjukkan status tugasan supaya semua orang dalam pasukan mengetahui perkembangan projek. Walau bagaimanapun, jika anda tidak mahu coretan itu dipaparkan, berikut ialah cara untuk membatalkannya.

2. Menggunakan pemalam carta Gantt dalam Vue

Menggunakan pemalam carta Gantt dalam Vue adalah sangat mudah. Anda hanya perlu menggunakan npm untuk memasang pemalam, dan memperkenalkan serta mengkonfigurasi komponen yang sepadan. Berikut ialah struktur asas projek Vue dan kod contoh tentang cara memasang dan memperkenalkan pemalam carta 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>

Dalam kod di atas, kami memasang pemalam vue-gantt-chart dan mendaftarkannya sebagai komponen Vue. Kami juga mentakrifkan objek tugasan, yang mengandungi dua tugasan dan tarikh mula dan tamatnya. Objek pilihan membolehkan kita mentakrifkan mod dan pilihan lain bagi rajah Gantt.

3. Nyah coret

Sekarang mari kita lihat cara untuk membatalkan coretan. Membongkar adalah sangat mudah. Kita hanya perlu menetapkan gaya CSS yang mewakili coretan kepada "tiada".

Berikut ialah helaian gaya CSS ringkas yang membatalkan coretan carta Gantt:

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

Anda boleh memasukkan helaian gaya CSS di atas dalam komponen Vue anda untuk membatalkan coretan Rajah carta Gantt. Jika anda hanya mahu mengalih keluar coretan untuk tugasan tertentu, anda boleh membuat kelas CSS yang berasingan untuk tugasan itu dan gunakannya pada carta bar untuk tugasan khusus tersebut.

Sebagai contoh, jika anda ingin membatalkan coretan untuk tugasan 1, anda boleh menambah kod CSS berikut dalam komponen:

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

Dalam kod di atas, kami telah mencipta kelas CSS untuk tugas 1 dan "tugas1" digunakan sebagai nama kelas. Kami juga menetapkan gaya coretan kepada "tiada" menggunakan "paparan:tiada".

4. Ringkasan

Menggunakan pemalam carta Gantt dalam Vue adalah sangat mudah dan mengalih keluar coretan juga mudah. Hanya tetapkan gaya CSS yang mewakili coretan kepada "tiada" untuk membatalkan coretan dalam carta Gantt. Selain itu, anda juga boleh membatalkan tugasan dengan mencipta kelas CSS untuk tugasan khusus itu secara berasingan, yang memberikan anda lebih fleksibiliti dan kawalan.

Atas ialah kandungan terperinci Cara membatalkan coretan dalam carta Vue Gantt. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!