Skip to content

Commit adef7a4

Browse files
committed
docs: update edit guide
1 parent 4eefb01 commit adef7a4

2 files changed

Lines changed: 12 additions & 0 deletions

File tree

docs/assets/guide/en/edit/edit_cell.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,8 @@ In the above example, we created a custom editor named `DateEditor` and implemen
188188
189189
```ts
190190
export interface IEditor<V = any> {
191+
/** Prepare the edit environment, when the edit trigger is keydown in vtable, the mouse click on the cell will call this method, otherwise the first character of the Chinese input method will be treated as an English character */
192+
prepareEdit?: (context: PrepareEditContext<V>) => void;
191193
/** Called when cell enters edit mode. */
192194
onStart?: (context: EditContext<V>) => void;
193195
/** called when cell exits edit mode. */
@@ -331,6 +333,11 @@ The basic table supports editing the display title in the header. You can enable
331333
332334
The source data corresponding to a specific cell can be obtained through the interface `getCellOriginRecord`
333335
336+
337+
## edit trigger timing is keydown notice
338+
339+
If the first pinyin is recognized as an English character under the Chinese input method, please check if there is a prepareEdit function. When the edit trigger is keydown, the mouse click on the cell will call this method to create an input box in advance, and set the input box to invisible, waiting for user input.
340+
334341
## Summary
335342
336343
Through the above steps, you can create a table with editing functions, select the appropriate editor type according to business needs, customize the editor, listen to editing events, and obtain edited data. In this way, users can easily edit the data in the table, and you can process the edited data accordingly.

docs/assets/guide/zh/edit/edit_cell.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,8 @@ VTable.register.editor('custom-date', custom_date_editor);
193193

194194
```ts
195195
export interface IEditor<V = any> {
196+
/** 准备编辑环境,vtable中编辑时机eeditCellTrigger为keydown时,鼠标点击单元格将调用此方法,否则中文输入法第一个字符会被当做英文字符 */
197+
prepareEdit?: (context: PrepareEditContext<V>) => void;
196198
/** * 单元格进入编辑状态时调用 */
197199
onStart: (context: EditContext<V>) => void;
198200
/** * 单元格退出编辑状态时调用 */
@@ -332,6 +334,9 @@ interface ListTableAPI {
332334

333335
具体单元格对应的源数据可以通过接口`getCellOriginRecord`来获取。
334336

337+
## 编辑时机为keydown时注意事项
338+
中文输入法下如果出现第一个拼音被识别成了英文字符,那么请检查是否有prepareEdit 函数。在编辑时机为keydown时,鼠标点击单元格将调用此方法,提前将创建输入框,并将输入框设置为不可见,等待用户输入。
339+
335340
## 总结
336341

337342
通过以上步骤,你可以创建一个具有编辑功能的表格,并根据业务需求选择合适的编辑器类型、自定义编辑器、监听编辑事件以及获取编辑后的数据。这样,用户就可以方便地编辑表格中的数据,并且你可以对编辑后的数据进行相应的处理。

0 commit comments

Comments
 (0)