diff --git a/demo/App.vue b/demo/App.vue index ea9b516..135e550 100644 --- a/demo/App.vue +++ b/demo/App.vue @@ -145,13 +145,36 @@ const toolbarConfig = { // TaskList列配置 const availableColumns = ref([ { key: 'predecessor', label: '前置任务', visible: true }, - { key: 'assignee', label: '负责人', visible: true, width: 250 }, - { key: 'startDate', label: '开始日期', visible: true }, + { + key: 'assignee', + label: '负责人', + visible: true, + width: 250, + // 示例:使用 formatter 格式化显示(可选,如果不使用列级slot) + // formatter: (task) => task.assignee ? `👤 ${task.assignee}` : '-' + }, + { + key: 'startDate', + label: '开始日期', + visible: true, + // 示例:日期格式化 + formatter: (task) => { + if (!task.startDate) return '-' + const date = new Date(task.startDate) + return `${date.getMonth() + 1}/${date.getDate()}` + } + }, { key: 'endDate', label: '结束日期', visible: true }, { key: 'estimatedHours', label: '预估工时', visible: true }, { key: 'actualHours', label: '实际工时', visible: true }, { key: 'progress', label: '进度', visible: true }, - { key: 'custom', label: '自定义列', visible: true, width: '30%' }, // 添加默认宽度120px + { + key: 'custom', + label: '自定义列', + visible: true, + width: '30%', + // 自定义列将使用 #column-custom slot 渲染 + }, ]) // TaskList宽度配置 @@ -1128,6 +1151,7 @@ const handleTaskRowMoved = async (payload: { @task-updated="handleTaskUpdateEvent" @task-row-moved="handleTaskRowMoved" > + + + + + + + + + + +
diff --git a/demo/data.json b/demo/data.json index 7c0d198..7d11cc3 100644 --- a/demo/data.json +++ b/demo/data.json @@ -26,6 +26,7 @@ "parentId": 1000, "description": "评估ADX-2024在健康志愿者和患者中的安全性、耐受性和药代动力学特征", "custom": "test11111", + "priority": "高", "children": [ { "id": 1101, diff --git a/src/components/GanttChart.vue b/src/components/GanttChart.vue index 264eb7b..6180e31 100644 --- a/src/components/GanttChart.vue +++ b/src/components/GanttChart.vue @@ -1,5 +1,5 @@