@fish-render/table-gantt

TableGantt 组件是一个将表格和甘特图结合在一起的复合组件，左侧显示表格数据，右侧显示对应的甘特图任务，支持两者之间的数据联动和同步滚动。

注意：该组件依赖于以下组件，请确保已安装：

• @fish-render/table
• @fish-render/gantt
• @fish-render/separator

安装

npm install @fish-render/table-gantt
# 或
yarn add @fish-render/table-gantt
# 或
pnpm add @fish-render/table-gantt

使用方法

基础用法

<template>
  <TableGantt
    height="500px"
    tableWidth="300px"
    :data="taskData"
    :columns="columns"
    @sync-scroll="handleSyncScroll"
    @update:data="handleDataUpdate"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 样式会自动加载，无需额外引入
import { TableGantt } from '@fish-render/table-gantt'

// 统一数据源
const taskData = ref([
  { 
    id: 1, 
    name: '任务1', 
    assignee: '张三',
    start: new Date('2023-06-01'),
    end: new Date('2023-06-05'),
    groupId: 'group1',
    progress: 0.5
  },
  { 
    id: 2, 
    name: '任务2', 
    assignee: '李四',
    start: new Date('2023-06-03'),
    end: new Date('2023-06-08'),
    groupId: 'group1',
    progress: 0.3
  },
  { 
    id: 3, 
    name: '任务3', 
    assignee: '王五',
    start: new Date('2023-06-06'),
    end: new Date('2023-06-10'),
    groupId: 'group2',
    progress: 0.8
  },
])

// 表格列配置
const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id' },
  { title: '任务名称', dataIndex: 'name', key: 'name' },
  { title: '负责人', dataIndex: 'assignee', key: 'assignee' },
  { title: '进度', dataIndex: 'progress', key: 'progress', render: (text) => `${Math.round(text * 100)}%` },
]

// 处理同步滚动
const handleSyncScroll = (scrollTop: number) => {
  console.log('同步滚动位置:', scrollTop)
}

// 处理数据更新
const handleDataUpdate = (updatedData: any[]) => {
  console.log('数据已更新:', updatedData)
  taskData.value = updatedData
}
</script>

全局引入方式

import { createApp } from 'vue'
import App from './App.vue'
import TableGanttPlugin from '@fish-render/table-gantt'

const app = createApp(App)
app.use(TableGanttPlugin)
app.mount('#app')

特性

1. 统一数据源：表格和甘特图共用一个数据源，简化数据管理
2. 左右联动：表格与甘特图同步滚动，提升用户体验
3. 灵活的字段映射：通过taskFieldMap配置项可以灵活映射数据源中的字段
4. 双向数据绑定：支持从甘特图更新回原始数据源
5. 完整的类型支持：提供TypeScript类型定义

注意事项

1. 确保数据源中包含甘特图所需的必要字段（至少包含id、start、end字段）
2. 推荐设置统一的行高，以确保滚动同步效果最佳
3. 当数据量大时，可能需要考虑性能优化策略
4. 如果数据源字段名与甘特图默认字段名不同，需要通过taskFieldMap进行映射配置

许可证

MIT License