vue vxe-gantt 甘特图完成产品进度列表，自定义任务条样式和提示信息

vue vxe-gantt 甘特图实现产品进度列表，自定义任务条样式和提示信息，通过指定 task-config.startField, task-config.endField, task-config.progressField 来自定义字段名

查看官网：https://gantt.vxeui.com/
gitbub：https://github.com/x-extends/vxe-gantt
gitee：https://gitee.com/x-extends/vxe-gantt

安装

npm install xe-utils@3.8.0 vxe-pc-ui@4.10.45 vxe-table@4.17.26 vxe-gantt@4.1.1

// ...
import VxeUIBase from 'vxe-pc-ui'
import 'vxe-pc-ui/es/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/es/style.css'
import VxeUIGantt from 'vxe-gantt'
import 'vxe-gantt/lib/style.css'
// ...
createApp(App).use(VxeUIBase).use(VxeUITable).use(VxeUIGantt).mount('#app')
// ...

效果

代码

通过 task-view-config.viewStyle.cellStyle 设置任务视图单元格样式，设置 task-bar-config.showTooltip 显示任务提示信息，使用 taskBar、taskBarTooltip 插槽来自定义模板

<template>
  <div>
      <vxe-gantt v-bind="ganttOptions">
        <template #task-bar="{ row }">
          <div class="custom-task-bar" :style="{ backgroundColor: row.bgColor }">
            <div class="custom-task-bar-img">
          <vxe-image :src="row.imgUrl" width="60" height="60"></vxe-image>
          </div>
          <div>
          <div>{{ row.title }}</div>
          <div>开始日期：{{ row.start }}</div>
          <div>结束日期：{{ row.end }}</div>
          <div>进度：{{ row.progress }}%</div>
          </div>
        </div>
      </template>
        <template #task-bar-tooltip="{ row }">
        <div>
        <div>任务名称：{{ row.title }}</div>
        <div>开始时间：{{ row.start }}</div>
        <div>结束时间：{{ row.end }}</div>
        <div>进度：{{ row.progress }}%</div>
        </div>
      </template>
    </vxe-gantt>
  </div>
</template>
  <script setup>
  import { reactive } from 'vue'
  const ganttOptions = reactive({
  border: true,
  height: 600,
  cellConfig: {
  height: 100
  },
  taskViewConfig: {
  tableStyle: {
  width: 380
  },
  showNowLine: true,
  scales: [
  { type: 'month' },
  {
  type: 'day',
  headerCellStyle ({ dateObj }) {
  // 周日高亮
  if (dateObj.e === 0) {
  return {
  backgroundColor: '#f9f0f0'
  }
  }
  return {}
  }
  },
  {
  type: 'date',
  headerCellStyle ({ dateObj }) {
  // 周日高亮
  if (dateObj.e === 0) {
  return {
  backgroundColor: '#f9f0f0'
  }
  }
  return {}
  }
  }
  ],
  viewStyle: {
  cellStyle ({ dateObj }) {
  // 周日高亮
  if (dateObj.e === 0) {
  return {
  backgroundColor: '#f9f0f0'
  }
  }
  return {}
  }
  }
  },
  taskBarConfig: {
  showTooltip: true,
  barStyle: {
  round: true
  }
  },
  columns: [
  { field: 'title', title: '任务名称' },
  { field: 'start', title: '开始时间', width: 100 },
  { field: 'end', title: '结束时间', width: 100 }
  ],
  data: [
  { id: 10001, title: '任务1', start: '2024-03-03', end: '2024-03-10', progress: 20, bgColor: '#c1c452', imgUrl: 'https://vxeui.com/resource/productImg/product9.png' },
  { id: 10002, title: '任务2', start: '2024-03-05', end: '2024-03-12', progress: 15, bgColor: '#fd9393', imgUrl: 'https://vxeui.com/resource/productImg/product8.png' },
  { id: 10003, title: '任务3', start: '2024-03-10', end: '2024-03-21', progress: 25, bgColor: '#92c1f1', imgUrl: 'https://vxeui.com/resource/productImg/product1.png' },
  { id: 10004, title: '任务4', start: '2024-03-15', end: '2024-03-24', progress: 70, bgColor: '#fad06c', imgUrl: 'https://vxeui.com/resource/productImg/product3.png' },
  { id: 10005, title: '任务5', start: '2024-03-20', end: '2024-04-05', progress: 50, bgColor: '#e78dd2', imgUrl: 'https://vxeui.com/resource/productImg/product11.png' },
  { id: 10006, title: '任务6', start: '2024-03-22', end: '2024-03-29', progress: 38, bgColor: '#8be1e6', imgUrl: 'https://vxeui.com/resource/productImg/product7.png' },
  { id: 10007, title: '任务7', start: '2024-03-28', end: '2024-04-04', progress: 24, bgColor: '#78e6d1', imgUrl: 'https://vxeui.com/resource/productImg/product5.png' },
  { id: 10008, title: '任务8', start: '2024-04-05', end: '2024-04-18', progress: 65, bgColor: '#edb695', imgUrl: 'https://vxeui.com/resource/productImg/product4.png' }
  ]
  })
</script>
  <style lang="scss" scoped>
  .custom-task-bar {
  display: flex;
  flex-direction: row;
  padding: 8px 16px;
  width: 100%;
  font-size: 12px;
  }
  .custom-task-bar-img {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  }
</style>

https://gitee.com/x-extends/vxe-gantt