feat(table): support TableEditableCellConfig.keepEditMode (#2662)

* feat(table): support TableEditableCellConfig.keepEditMode

* test: update snapshots

src/table/_example/editable-cell.vue

@@ -9,7 +9,6 @@
       :editable-cell-state="editableCellState"
       bordered
       lazyLoad
-      @row-validate="onRowValidate"
     />
     <!-- 示例代码有效，勿删 -->
     <!-- <t-button @click="validateTableData">校验</t-button> -->
@@ -128,6 +127,8 @@ export default {
           cell: (h, { row }) => row.letters.join('、'),
           edit: {
             component: Select,
+            keepEditMode: true,
+            rules: [{ validator: (val) => val.length > 0, message: '至少选择一种' }],
             // props, 透传全部属性到 Select 组件
             // props 为函数时，参数有：col, row, rowIndex, colIndex, editedRow。一般用于实现编辑组件之间的联动
             props: ({
@@ -186,11 +187,9 @@ export default {
   methods: {
     // 用于控制哪些行或哪些单元格不允许出现编辑态
     editableCellState(cellParams) {
-      const { row } = cellParams;
-      return row.status !== 2;
-    },
-    onRowValidate(params) {
-      console.log('validate:', params);
+      const { rowIndex } = cellParams;
+      // return row.status !== 2;
+      return rowIndex !== 2;
     },
 
     // 用于提交前校验数据（示例代码有效，勿删）

src/table/editable-cell.tsx

@@ -79,7 +79,10 @@ export default defineComponent({
   setup(props: EditableCellProps, context: SetupContext) {
     const { row, col } = toRefs(props);
     const tableEditableCellRef = ref(null);
-    const isEdit = ref(props.col.edit?.defaultEditable || false);
+
+    const isKeepEditMode = computed(() => col.value.edit?.keepEditMode);
+
+    const isEdit = ref(isKeepEditMode.value || col.value.edit?.defaultEditable || false);
     const editValue = ref();
     const errorList = ref<AllValidateResult[]>();
     const classPrefix = usePrefixClass();
@@ -90,6 +93,12 @@ export default defineComponent({
       editValue.value = val;
     };
 
+    watch([isKeepEditMode], (val) => {
+      if (val) {
+        isEdit.value = true;
+      }
+    });
+
     const editOnListeners = computed(() => {
       const listeners = col.value.edit?.on?.({ ...cellParams.value, editedRow: currentRow.value, updateEditedCellValue }) || {};
       // example: onEnter-> enter
@@ -213,7 +222,9 @@ export default defineComponent({
         editOnListeners.value[eventName]?.(args[2]);
         // 此处必须在事件执行完成后异步销毁编辑组件，否则会导致事件清除不及时引起的其他问题
         const timer = setTimeout(() => {
-          isEdit.value = false;
+          if (!isKeepEditMode.value) {
+            isEdit.value = false;
+          }
           errorList.value = [];
           props.onEditableChange?.({
             ...cellParams.value,

src/table/table.en-US.md

@@ -292,6 +292,7 @@ name | type | default | description | required
 abortEditOnEvent | Array | - | Typescript：`string[]` | N
 component | \- | - | component definition。Typescript：`ComponentType`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 defaultEditable | Boolean | false | set default editable once | N
+keepEditMode | Boolean | false | set table cell always to be editable | N
 on | Function | - | Typescript：`(context: TableEditableCellPropsParams<T>) => { [eventName: string]: Function }` | N
 onEdited | Function | - | trigger on finishing editing。Typescript：`(context: PrimaryTableOnEditedContext<T>) => void` `type PrimaryTableOnEditedContext<T> = PrimaryTableCellParams<T> & { trigger: string; newRowData: T; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 props | Object | - | props of `edit.component`。Typescript：`TableEditableCellProps<T>` `type TableEditableCellProps<T> = TablePlainObject \| ((params: TableEditableCellPropsParams<T>) => TablePlainObject)` `interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<T> { editedRow: T; updateEditedCellValue: (val: any) => void }` `interface TablePlainObject{ [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N

src/table/table.md

@@ -292,6 +292,7 @@ placement | String | top-right | 列配置按钮基于表格的放置位置：
 abortEditOnEvent | Array | - | 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态。示例：`abortEditOnEvent: ['onChange']`。TS 类型：`string[]` | N
 component | \- | - | 组件定义，如：`Input` `Select`。对于完全自定义的组件（非组件库内的组件），组件需要支持 `value` 和 `onChange` ；如果还需要支持校验规则，则组件还需实现 `tips` 和 `status` 两个 API，实现规则可参考 `Input` 组件。TS 类型：`ComponentType`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 defaultEditable | Boolean | false | 单元格默认状态是否为编辑态 | N
+keepEditMode | Boolean | false | 设置当前列的单元格始终保持为编辑态 | N
 on | Function | - | 透传给编辑组件的事件。TS 类型：`(context: TableEditableCellPropsParams<T>) => { [eventName: string]: Function }` | N
 onEdited | Function | - | 编辑完成后，退出编辑模式时触发。TS 类型：`(context: PrimaryTableOnEditedContext<T>) => void` `type PrimaryTableOnEditedContext<T> = PrimaryTableCellParams<T> & { trigger: string; newRowData: T; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N
 props | Object | - | 透传给组件 `edit.component` 的属性。TS 类型：`TableEditableCellProps<T>` `type TableEditableCellProps<T> = TablePlainObject \| ((params: TableEditableCellPropsParams<T>) => TablePlainObject)` `interface TableEditableCellPropsParams<T> extends PrimaryTableCellParams<T> { editedRow: T; updateEditedCellValue: (val: any) => void }` `interface TablePlainObject{ [key: string]: any }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/table/type.ts) | N

src/table/type.ts

@@ -870,6 +870,11 @@ export interface TableEditableCellConfig<T extends TableRowData = TableRowData>
    * @default false
    */
   defaultEditable?: boolean;
+  /**
+   * 设置当前列的单元格始终保持为编辑态
+   * @default false
+   */
+  keepEditMode?: boolean;
   /**
    * 透传给编辑组件的事件
    */