vxe-table整和甘特图示例代码

vxe-table 是一个基于 Vue.js 的开源表格组件，它提供了丰富的功能和灵活的配置选项，可以用于快速构建各种类型的表格。甘特图是一种项目管理工具，用于展示项目的进度和时间安排。下面是一个使用 vxe-table 整合甘特图的示例代码：

<template>
  <div>
    <vxe-table
      :data="tableData"
      :columns="tableColumns"
      :edit-config="{ trigger: 'manual' }"
      @cell-click="handleCellClick"
    ></vxe-table>
  </div>
</template>

<script>
import 'vxe-table/lib/style.css';
import { VXETable } from 'vxe-table';
import XEUtils from 'xe-utils';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Task 1', start: '2022-01-01', end: '2022-01-05' },
        { id: 2, name: 'Task 2', start: '2022-01-06', end: '2022-01-10' },
        { id: 3, name: 'Task 3', start: '2022-01-11', end: '2022-01-15' },
      ],
      tableColumns: [
        { field: 'name', title: 'Task Name' },
        { field: 'start', title: 'Start Date' },
        { field: 'end', title: 'End Date' },
        {
          field: 'gantt',
          title: 'Gantt Chart',
          slots: { default: 'ganttTpl' },
          width: 300,
        },
      ],
    };
  },
  mounted() {
    VXETable.renderer.add('ganttTpl', {
      renderHeader(h, params) {
        return [
          h('div', {
            class: 'vxe-cell',
            style: {
              width: '100%',
              height: '20px',
              background: '#e8e8e8',
              borderRadius: '2px',
            },
          }),
        ];
      },
      renderCell(h, params) {
        const { row } = params;
        const startDate = new Date(row.start);
        const endDate = new Date(row.end);
        const totalDays = XEUtils.getWhatDay(startDate, endDate) + 1;
        const progressDays = XEUtils.getWhatDay(startDate, new Date()) + 1;
        const progressWidth = (progressDays / totalDays) * 100;
        return [
          h('div', {
            class: 'vxe-cell',
            style: {
              width: '100%',
              height: '20px',
              background: '#1890ff',
              borderRadius: '2px',
            },
          }, [
            h('div', {
              class: 'vxe-cell-inner',
              style: {
                width: `${progressWidth}%`,
                height: '100%',
                background: '#52c41a',
                borderRadius: '2px',
              },
            }),
          ]),
        ];
      },
    });
  },
  methods: {
    handleCellClick(params) {
      if (params.column.property === 'gantt') {
        // 处理甘特图点击事件
      }
    },
  },
};
</script>

<style>
.vxe-cell {
  display: flex;
  align-items: center;
}

.vxe-cell-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
}
</style>

在上面的示例代码中，我们使用了 vxe-table 的 `vxe-table` 组件来展示表格数据。通过配置 `columns` 属性，我们定义了表格的列信息，其中包括一个名为 `gantt` 的列，用于展示甘特图。通过 `slots` 属性，我们指定了 `gantt` 列的自定义模板 `ganttTpl`。

在 `mounted` 钩子函数中，我们使用 `VXETable.renderer.add` 方法注册了一个自定义渲染器，用于渲染甘特图列的内容。在自定义渲染器的 `renderCell` 方法中，我们根据任务的开始日期和结束日期计算出任务的总天数和已完成的天数，并根据比例计算出进度条的宽度。

通过以上代码，我们可以实现一个简单的使用 vxe-table 整合甘特图的功能。