fix(useColumns): 多级表头下的列支持行内编辑 (#2521)

Carson · GitHub
1 parent 0dc2f149
Showing 2 changed files with 74 additions and 60 deletions
src/components/Table/src/hooks/useColumns.ts
src/views/demo/table/EditRowTable.vue
@@ -146,31 +146,38 @@ export function useColumns(
   const getViewColumns = computed(() => {
     const viewColumns = sortFixedColumn(unref(getColumnsRef));
  
+    const mapFn = (column) => {
+      const { slots, customRender, format, edit, editRow, flag } = column;
+
+      if (!slots || !slots?.title) {
+        // column.slots = { title: `header-${dataIndex}`, ...(slots || {}) };
+        column.customTitle = column.title;
+        Reflect.deleteProperty(column, 'title');
+      }
+      const isDefaultAction = [INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG].includes(flag!);
+      if (!customRender && format && !edit && !isDefaultAction) {
+        column.customRender = ({ text, record, index }) => {
+          return formatCell(text, format, record, index);
+        };
+      }
+
+      // edit table
+      if ((edit || editRow) && !isDefaultAction) {
+        column.customRender = renderEditCell(column);
+      }
+      return reactive(column);
+    };
+
     const columns = cloneDeep(viewColumns);
     return columns
-      .filter((column) => {
-        return hasPermission(column.auth) && isIfShow(column);
-      })
+      .filter((column) => hasPermission(column.auth) && isIfShow(column))
       .map((column) => {
-        const { slots, customRender, format, edit, editRow, flag } = column;
-
-        if (!slots || !slots?.title) {
-          // column.slots = { title: `header-${dataIndex}`, ...(slots || {}) };
-          column.customTitle = column.title;
-          Reflect.deleteProperty(column, 'title');
-        }
-        const isDefaultAction = [INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG].includes(flag!);
-        if (!customRender && format && !edit && !isDefaultAction) {
-          column.customRender = ({ text, record, index }) => {
-            return formatCell(text, format, record, index);
-          };
+        // Support table multiple header editable
+        if (column.children?.length) {
+          column.children = column.children.map(mapFn);
         }
  
-        // edit table
-        if ((edit || editRow) && !isDefaultAction) {
-          column.customRender = renderEditCell(column);
-        }
-        return reactive(column);
+        return mapFn(column);
       });
   });
  
@@ -29,47 +29,54 @@
   const columns: BasicColumn[] = [
     {
       title: '输入框',
-      dataIndex: 'name',
+      dataIndex: 'name-group',
       editRow: true,
-      editComponentProps: {
-        prefix: '$',
-      },
-      width: 150,
-    },
-    {
-      title: '默认输入状态',
-      dataIndex: 'name7',
-      editRow: true,
-      width: 150,
-    },
-    {
-      title: '输入框校验',
-      dataIndex: 'name1',
-      editRow: true,
-      align: 'left',
-      // 默认必填校验
-      editRule: true,
-      width: 150,
-    },
-    {
-      title: '输入框函数校验',
-      dataIndex: 'name2',
-      editRow: true,
-      align: 'right',
-      editRule: async (text) => {
-        if (text === '2') {
-          return '不能输入该值';
-        }
-        return '';
-      },
-    },
-    {
-      title: '数字输入框',
-      dataIndex: 'id',
-      editRow: true,
-      editRule: true,
-      editComponent: 'InputNumber',
-      width: 150,
+      children: [
+        {
+          title: '输入框',
+          dataIndex: 'name',
+          editRow: true,
+          editComponentProps: {
+            prefix: '$',
+          },
+          width: 150,
+        },
+        {
+          title: '默认输入状态',
+          dataIndex: 'name7',
+          editRow: true,
+          width: 150,
+        },
+        {
+          title: '输入框校验',
+          dataIndex: 'name1',
+          editRow: true,
+          align: 'left',
+          // 默认必填校验
+          editRule: true,
+          width: 150,
+        },
+        {
+          title: '输入框函数校验',
+          dataIndex: 'name2',
+          editRow: true,
+          align: 'right',
+          editRule: async (text) => {
+            if (text === '2') {
+              return '不能输入该值';
+            }
+            return '';
+          },
+        },
+        {
+          title: '数字输入框',
+          dataIndex: 'id',
+          editRow: true,
+          editRule: true,
+          editComponent: 'InputNumber',
+          width: 150,
+        },
+      ],
     },
     {
       title: '下拉框',