甘特图编辑能力

在本教程中，我们将介绍如何使用 @visactor/vtable-gantt 的编辑能力。

因为左侧是一个完整的 ListTable，所以可直接参照在 ListTable 中编辑教程。

使用步骤

1. 引用 VTable 的编辑器包：

使用 NPM 包

首先，确保已经正确安装了 VTable 库@visactor/vtable 和相关的编辑器包@visactor/vtable-editors。你可以使用以下命令来安装它们：

# 使用 npm 安装
npm install @visactor/vtable-editors

# 使用 yarn 安装
yarn add @visactor/vtable-editors

在代码中引入所需类型的编辑器模块：

import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';

使用 CDN

你还可以通过 CDN 获取构建好的 VTable-Editor 文件。

<script src="https://unpkg.com/@visactor/vtable-editors@latest/dist/vtable-editors.min.js"></script>
<script>
  const inputEditor = new VTable.editors.InputEditor();
</script>

2. 创建编辑器：

VTable-ediotrs 库中目前提供了四种编辑器类型，包括文本输入框、多行文本输入框、日期选择器、下拉列表等。你可以根据需要选择合适的编辑器。(下拉列表编辑器效果还在优化中，目前比较丑哈)

以下是创建编辑器的示例代码：

const inputEditor = new InputEditor();
const textAreaEditor = new TextAreaEditor();
const dateInputEditor = new DateInputEditor();
const listEditor = new ListEditor({ values: ['女', '男'] });

在上面的示例中，我们创建了一个文本输入框编辑器(InputEditor)、一个多行文本框编辑器(TextAreaEditor)、 一个日期选择器编辑器(DateInputEditor)和一个下拉列表编辑器(ListEditor)。你可以根据实际需求选择适合的编辑器类型。

3. 注册并使用编辑器：

在使用编辑器前，需要将编辑器实例注册到 VTable 中：

// import * as VTable from '@visactor/vtable';
// 注册编辑器到VTable
VTableGantt.VTable.register.editor('name-editor', inputEditor);
VTableGantt.VTable.register.editor('name-editor2', inputEditor2);
VTableGantt.VTable.register.editor('textArea-editor', textAreaEditor);
VTableGantt.VTable.register.editor('number-editor', numberEditor);
VTableGantt.VTable.register.editor('date-editor', dateInputEditor);
VTableGantt.VTable.register.editor('list-editor', listEditor);

接下来需要再 columns 配置中指定使用的编辑器：

columns: [
  { title: 'name', field: 'name', editor(args)=>{
    if(args.row%2 === 0)
      return 'name-editor';
    else
      return 'name-editor2';
  } },
  { title: 'age', field: 'age', editor: 'number-editor' },
  { title: 'gender', field: 'gender', editor: 'list-editor' },
  { title: 'address', field: 'address', editor: 'textArea-editor' },
  { title: 'birthday', field: 'birthDate', editor: 'date-editor' },
]

在左侧任务列表表格中，用户可以通过双击（或者其他交互方式）单元格来开始编辑。

示例

如果有自定义编辑的需求，请参考完整的教程文档：编辑教程。

目前，编辑只支持在任务列表表格中进行。任务条的编辑能力只支持拖拽宽度和拖拽位置，目前还不支持直接在任务条上进行编辑。