VTable表格组件的编辑单元格能力使用问题:编辑器怎么配置,是否可以复用?

289 阅读1分钟

问题描述

业务场景中表格有很多列,如果每一列都需要配置一个编辑器的话,会比较繁琐,请问是否有简单的方式来定义呢?

解决方案

可以根据具体业务复用程度来决定采用哪种方式配置编辑器:

  1. 全局只配置一个编辑器,所有单元格都用得上:
import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
const option={
  editor: new InputEditor()
}

配置之后,可以点击所有的单元格进行编辑

  1. 如果某几个列可以复用同样的编辑器,可以在columns列配置中声明相同的editor名字、
import { DateInputEditor, InputEditor, ListEditor, TextAreaEditor } from '@visactor/vtable-editors';
const input_editor = new InputEditor();
VTable.register.editor('input-editor', input_editor);

const option={
  columns:[
      {field:'id',title: 'ID'},
      {field:'name',title: 'NAME',editor:'input-editor'},
      {field:'address',title: 'ADDRESS',editor:'input-editor'},
  ]
}

配置后会发现该列单元格都可以进行编辑了。

可以按上述两种方式,在官网demo中稍加修改调试进行验证。demo地址:visactor.io/vtable/demo…

相关文档

编辑表格demo:visactor.io/vtable/demo…

编辑表格教程:visactor.io/vtable/guid…

相关api:

  visactor.io/vtable/opti…

  visactor.io/vtable/opti…

github:github.com/VisActor/VT…