From f7a1b022369d535cd0e53fd2a94ffca33664c8a7 Mon Sep 17 00:00:00 2001
From: Carson <huguangju@users.noreply.github.com>
Date: Sun, 5 Feb 2023 16:33:12 +0800
Subject: [PATCH] =?UTF-8?q?fix(useColumns):=20=E5=A4=9A=E7=BA=A7=E8=A1=A8?=
 =?UTF-8?q?=E5=A4=B4=E4=B8=8B=E7=9A=84=E5=88=97=E6=94=AF=E6=8C=81=E8=A1=8C?=
 =?UTF-8?q?=E5=86=85=E7=BC=96=E8=BE=91=20(#2521)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Table/src/hooks/useColumns.ts | 47 ++++++-----
 src/views/demo/table/EditRowTable.vue        | 87 +++++++++++---------
 2 files changed, 74 insertions(+), 60 deletions(-)

diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts
index e450d9b38..d073e777d 100644
--- a/src/components/Table/src/hooks/useColumns.ts
+++ b/src/components/Table/src/hooks/useColumns.ts
@@ -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);
       });
   });
 
diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
index 642ef29e5..7cc2d45c0 100644
--- a/src/views/demo/table/EditRowTable.vue
+++ b/src/views/demo/table/EditRowTable.vue
@@ -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: '下拉框',