From de7279399d443926ddce90395bb19cd471d48e80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wit=E3=80=86=E8=8B=97=E5=A4=A7?=
 <38201220+WitMiao@users.noreply.github.com>
Date: Tue, 5 Jul 2022 11:56:29 +0800
Subject: [PATCH] =?UTF-8?q?fix(table):=20=E5=BD=BB=E5=BA=95=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8Dcolumn.slots=E5=B7=B2=E5=BA=9F=E5=BC=83=E7=9A=84antd?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99,=20=E6=89=80=E6=9C=89=E7=94=A8=E5=88=B0?=
 =?UTF-8?q?=E7=9A=84demo=E9=A1=B5=E4=BF=AE=E6=94=B9=E4=B8=BAantd=203.x=20v?=
 =?UTF-8?q?-slot:headerCell=20=E5=92=8C=20v-slot:bodyCell=20=E5=86=99?=
 =?UTF-8?q?=E6=B3=95=20(#2030)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 苗大 <v.caoshm@yoozoo.com>
---
 src/views/demo/page/form/high/PersonTable.vue |  8 +-
 src/views/demo/system/account/index.vue       | 52 ++++++-----
 src/views/demo/system/dept/index.vue          | 38 ++++----
 src/views/demo/system/menu/index.vue          | 38 ++++----
 src/views/demo/system/role/index.vue          | 38 ++++----
 src/views/demo/table/AuthColumn.vue           | 92 ++++++++++---------
 src/views/demo/table/CustomerCell.vue         | 12 ++-
 src/views/demo/table/EditRowTable.vue         |  8 +-
 src/views/demo/table/ExpandTable.vue          | 47 +++++-----
 src/views/demo/table/FixedColumn.vue          | 38 ++++----
 src/views/demo/table/FixedHeight.vue          | 26 ++++--
 src/views/demo/table/tableData.tsx            |  8 +-
 src/views/sys/error-log/index.vue             | 21 +++--
 13 files changed, 228 insertions(+), 198 deletions(-)

diff --git a/src/views/demo/page/form/high/PersonTable.vue b/src/views/demo/page/form/high/PersonTable.vue
index 0ee9fc70..734bdf54 100644
--- a/src/views/demo/page/form/high/PersonTable.vue
+++ b/src/views/demo/page/form/high/PersonTable.vue
@@ -1,8 +1,10 @@
 <template>
   <div>
     <BasicTable @register="registerTable" @edit-change="handleEditChange">
-      <template #action="{ record, column }">
-        <TableAction :actions="createActions(record, column)" />
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction :actions="createActions(record, column)" />
+        </template>
       </template>
     </BasicTable>
     <a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增成员 </a-button>
@@ -65,7 +67,7 @@
           width: 160,
           title: '操作',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
+          // slots: { customRender: 'action' },
         },
         pagination: false,
       });
diff --git a/src/views/demo/system/account/index.vue b/src/views/demo/system/account/index.vue
index 90d714ac..8e129023 100644
--- a/src/views/demo/system/account/index.vue
+++ b/src/views/demo/system/account/index.vue
@@ -5,31 +5,33 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate">新增账号</a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'clarity:info-standard-line',
-              tooltip: '查看用户详情',
-              onClick: handleView.bind(null, record),
-            },
-            {
-              icon: 'clarity:note-edit-line',
-              tooltip: '编辑用户资料',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              tooltip: '删除此账号',
-              popConfirm: {
-                title: '是否确认删除',
-                placement: 'left',
-                confirm: handleDelete.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:info-standard-line',
+                tooltip: '查看用户详情',
+                onClick: handleView.bind(null, record),
               },
-            },
-          ]"
-        />
+              {
+                icon: 'clarity:note-edit-line',
+                tooltip: '编辑用户资料',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                tooltip: '删除此账号',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <AccountModal @register="registerModal" @success="handleSuccess" />
@@ -77,7 +79,7 @@
           width: 120,
           title: '操作',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
+          // slots: { customRender: 'action' },
         },
       });
 
diff --git a/src/views/demo/system/dept/index.vue b/src/views/demo/system/dept/index.vue
index 0bf5f302..a3d2cf05 100644
--- a/src/views/demo/system/dept/index.vue
+++ b/src/views/demo/system/dept/index.vue
@@ -4,24 +4,26 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增部门 </a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                placement: 'left',
-                confirm: handleDelete.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
               },
-            },
-          ]"
-        />
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <DeptModal @register="registerModal" @success="handleSuccess" />
@@ -62,7 +64,7 @@
           width: 80,
           title: '操作',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
+          // slots: { customRender: 'action' },
           fixed: undefined,
         },
       });
diff --git a/src/views/demo/system/menu/index.vue b/src/views/demo/system/menu/index.vue
index 79ce332c..96d3f9a1 100644
--- a/src/views/demo/system/menu/index.vue
+++ b/src/views/demo/system/menu/index.vue
@@ -4,24 +4,26 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                placement: 'left',
-                confirm: handleDelete.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
               },
-            },
-          ]"
-        />
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <MenuDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -63,7 +65,7 @@
           width: 80,
           title: '操作',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
+          // slots: { customRender: 'action' },
           fixed: undefined,
         },
       });
diff --git a/src/views/demo/system/role/index.vue b/src/views/demo/system/role/index.vue
index 604779b7..b1e41411 100644
--- a/src/views/demo/system/role/index.vue
+++ b/src/views/demo/system/role/index.vue
@@ -4,24 +4,26 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate"> 新增角色 </a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              icon: 'clarity:note-edit-line',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              icon: 'ant-design:delete-outlined',
-              color: 'error',
-              popConfirm: {
-                title: '是否确认删除',
-                placement: 'left',
-                confirm: handleDelete.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
               },
-            },
-          ]"
-        />
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
     <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
@@ -59,7 +61,7 @@
           width: 80,
           title: '操作',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
+          // slots: { customRender: 'action' },
           fixed: undefined,
         },
       });
diff --git a/src/views/demo/table/AuthColumn.vue b/src/views/demo/table/AuthColumn.vue
index a6113246..ae5ed9de 100644
--- a/src/views/demo/table/AuthColumn.vue
+++ b/src/views/demo/table/AuthColumn.vue
@@ -1,55 +1,57 @@
 <template>
   <div class="p-4">
     <BasicTable @register="registerTable">
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-              auth: 'other', // 根据权限控制是否显示: 无权限，不显示
-            },
-            {
-              label: '删除',
-              icon: 'ic:outline-delete-outline',
-              onClick: handleDelete.bind(null, record),
-              auth: 'super', // 根据权限控制是否显示: 有权限，会显示
-            },
-          ]"
-          :dropDownActions="[
-            {
-              label: '启用',
-              popConfirm: {
-                title: '是否启用？',
-                confirm: handleOpen.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '编辑',
+                onClick: handleEdit.bind(null, record),
+                auth: 'other', // 根据权限控制是否显示: 无权限，不显示
               },
-              ifShow: (_action) => {
-                return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
+              {
+                label: '删除',
+                icon: 'ic:outline-delete-outline',
+                onClick: handleDelete.bind(null, record),
+                auth: 'super', // 根据权限控制是否显示: 有权限，会显示
               },
-            },
-            {
-              label: '禁用',
-              popConfirm: {
-                title: '是否禁用？',
-                confirm: handleOpen.bind(null, record),
+            ]"
+            :dropDownActions="[
+              {
+                label: '启用',
+                popConfirm: {
+                  title: '是否启用？',
+                  confirm: handleOpen.bind(null, record),
+                },
+                ifShow: (_action) => {
+                  return record.status !== 'enable'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮
+                },
               },
-              ifShow: () => {
-                return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
+              {
+                label: '禁用',
+                popConfirm: {
+                  title: '是否禁用？',
+                  confirm: handleOpen.bind(null, record),
+                },
+                ifShow: () => {
+                  return record.status === 'enable'; // 根据业务控制是否显示: enable状态的显示禁用按钮
+                },
               },
-            },
-            {
-              label: '同时控制',
-              popConfirm: {
-                title: '是否动态显示？',
-                confirm: handleOpen.bind(null, record),
+              {
+                label: '同时控制',
+                popConfirm: {
+                  title: '是否动态显示？',
+                  confirm: handleOpen.bind(null, record),
+                },
+                auth: 'super', // 同时根据权限和业务控制是否显示
+                ifShow: () => {
+                  return true;
+                },
               },
-              auth: 'super', // 同时根据权限和业务控制是否显示
-              ifShow: () => {
-                return true;
-              },
-            },
-          ]"
-        />
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
   </div>
@@ -104,7 +106,7 @@
           width: 250,
           title: 'Action',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
+          // slots: { customRender: 'action' },
         },
       });
       function handleEdit(record: Recordable) {
diff --git a/src/views/demo/table/CustomerCell.vue b/src/views/demo/table/CustomerCell.vue
index ffb1e972..d7b33b49 100644
--- a/src/views/demo/table/CustomerCell.vue
+++ b/src/views/demo/table/CustomerCell.vue
@@ -3,20 +3,22 @@
     <BasicTable @register="registerTable">
       <template #bodyCell="{ column, record, text }">
         <template v-if="column.key === 'id'"> ID: {{ record.id }} </template>
-        <template v-if="column.key === 'no'">
+        <template v-else-if="column.key === 'no'">
           <Tag color="green">
             {{ record.no }}
           </Tag>
         </template>
-        <template v-if="column.key === 'avatar'">
+        <template v-else-if="column.key === 'avatar'">
           <Avatar :size="60" :src="record.avatar" />
         </template>
-        <template v-if="column.key === 'imgArr'">
+        <template v-else-if="column.key === 'imgArr'">
           <TableImg :size="60" :simpleShow="true" :imgList="text" />
         </template>
-        <template v-if="column.key === 'imgs'"> <TableImg :size="60" :imgList="text" /> </template>
+        <template v-else-if="column.key === 'imgs'">
+          <TableImg :size="60" :imgList="text" />
+        </template>
 
-        <template v-if="column.key === 'category'">
+        <template v-else-if="column.key === 'category'">
           <Tag color="green">
             {{ record.no }}
           </Tag>
diff --git a/src/views/demo/table/EditRowTable.vue b/src/views/demo/table/EditRowTable.vue
index 4a8e5792..128d9032 100644
--- a/src/views/demo/table/EditRowTable.vue
+++ b/src/views/demo/table/EditRowTable.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="p-4">
     <BasicTable @register="registerTable" @edit-change="onEditChange">
-      <template #action="{ record, column }">
-        <TableAction :actions="createActions(record, column)" />
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction :actions="createActions(record, column)" />
+        </template>
       </template>
     </BasicTable>
   </div>
@@ -180,7 +182,7 @@
           width: 160,
           title: 'Action',
           dataIndex: 'action',
-          slots: { customRender: 'action' },
+          // slots: { customRender: 'action' },
         },
       });
 
diff --git a/src/views/demo/table/ExpandTable.vue b/src/views/demo/table/ExpandTable.vue
index 97650f99..3568e96a 100644
--- a/src/views/demo/table/ExpandTable.vue
+++ b/src/views/demo/table/ExpandTable.vue
@@ -4,29 +4,31 @@
     content="不可与scroll共用。TableAction组件可配置stopButtonPropagation来阻止操作按钮的点击事件冒泡，以便配合Table组件的expandRowByClick"
   >
     <BasicTable @register="registerTable">
-      <template #expandedRowRender="{ record }">
-        <span>No: {{ record.no }} </span>
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          stopButtonPropagation
-          :actions="[
-            {
-              label: '删除',
-              icon: 'ic:outline-delete-outline',
-              onClick: handleDelete.bind(null, record),
-            },
-          ]"
-          :dropDownActions="[
-            {
-              label: '启用',
-              popConfirm: {
-                title: '是否启用？',
-                confirm: handleOpen.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'no'">
+          <span>No: {{ record.no }} </span>
+        </template>
+        <template v-else-if="column.key === 'action'">
+          <TableAction
+            stopButtonPropagation
+            :actions="[
+              {
+                label: '删除',
+                icon: 'ic:outline-delete-outline',
+                onClick: handleDelete.bind(null, record),
               },
-            },
-          ]"
-        />
+            ]"
+            :dropDownActions="[
+              {
+                label: '启用',
+                popConfirm: {
+                  title: '是否启用？',
+                  confirm: handleOpen.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
   </PageWrapper>
@@ -53,6 +55,7 @@
         actionColumn: {
           width: 160,
           title: 'Action',
+          dataIndex: 'action',
           // slots: { customRender: 'action' },
         },
       });
diff --git a/src/views/demo/table/FixedColumn.vue b/src/views/demo/table/FixedColumn.vue
index 2bdd384c..74e58d9f 100644
--- a/src/views/demo/table/FixedColumn.vue
+++ b/src/views/demo/table/FixedColumn.vue
@@ -1,25 +1,27 @@
 <template>
   <div class="p-4">
     <BasicTable @register="registerTable">
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '删除',
-              icon: 'ic:outline-delete-outline',
-              onClick: handleDelete.bind(null, record),
-            },
-          ]"
-          :dropDownActions="[
-            {
-              label: '启用',
-              popConfirm: {
-                title: '是否启用？',
-                confirm: handleOpen.bind(null, record),
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '删除',
+                icon: 'ic:outline-delete-outline',
+                onClick: handleDelete.bind(null, record),
               },
-            },
-          ]"
-        />
+            ]"
+            :dropDownActions="[
+              {
+                label: '启用',
+                popConfirm: {
+                  title: '是否启用？',
+                  confirm: handleOpen.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
   </div>
diff --git a/src/views/demo/table/FixedHeight.vue b/src/views/demo/table/FixedHeight.vue
index 389da36e..4f8b28e0 100644
--- a/src/views/demo/table/FixedHeight.vue
+++ b/src/views/demo/table/FixedHeight.vue
@@ -1,15 +1,20 @@
 <template>
   <div class="p-4">
     <BasicTable @register="registerTable">
-      <template #customTitle>
-        <span>
-          姓名
-          <BasicHelp class="ml-2" text="姓名" />
-        </span>
-      </template>
-      <template #customAddress>
-        地址
-        <FormOutlined class="ml-2" />
+      <template #headerCell="{ column }">
+        <template v-if="column.key === 'name'">
+          <span>
+            姓名
+            <BasicHelp class="ml-2" text="headerHelpMessage方式2" />
+          </span>
+        </template>
+        <template v-else-if="column.key === 'address'">
+          地址
+          <FormOutlined class="ml-2" />
+        </template>
+        <template v-else>
+          <HeaderCell :column="column" />
+        </template>
       </template>
     </BasicTable>
   </div>
@@ -21,9 +26,10 @@
   import { FormOutlined } from '@ant-design/icons-vue';
   import { demoListApi } from '/@/api/demo/table';
   import { BasicHelp } from '/@/components/Basic';
+  import HeaderCell from '/@/components/Table/src/components/HeaderCell.vue';
 
   export default defineComponent({
-    components: { BasicTable, FormOutlined, BasicHelp },
+    components: { BasicTable, FormOutlined, BasicHelp, HeaderCell },
     setup() {
       const [registerTable] = useTable({
         title: '定高/头部自定义',
diff --git a/src/views/demo/table/tableData.tsx b/src/views/demo/table/tableData.tsx
index 409eabf1..7c45a1be 100644
--- a/src/views/demo/table/tableData.tsx
+++ b/src/views/demo/table/tableData.tsx
@@ -117,6 +117,7 @@ export function getCustomHeaderColumns(): BasicColumn[] {
     {
       title: 'ID',
       dataIndex: 'id',
+      helpMessage: 'headerHelpMessage方式1',
       width: 200,
     },
     {
@@ -256,7 +257,7 @@ export function getFormConfig(): Partial<FormProps> {
   };
 }
 export function getBasicData() {
-  const data: any = (() => {
+  return (() => {
     const arr: any = [];
     for (let index = 0; index < 40; index++) {
       arr.push({
@@ -271,11 +272,10 @@ export function getBasicData() {
     }
     return arr;
   })();
-  return data;
 }
 
 export function getTreeTableData() {
-  const data: any = (() => {
+  return (() => {
     const arr: any = [];
     for (let index = 0; index < 40; index++) {
       arr.push({
@@ -301,6 +301,4 @@ export function getTreeTableData() {
     }
     return arr;
   })();
-
-  return data;
 }
diff --git a/src/views/sys/error-log/index.vue b/src/views/sys/error-log/index.vue
index 69b77db1..7c546b26 100644
--- a/src/views/sys/error-log/index.vue
+++ b/src/views/sys/error-log/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-4">
     <template v-for="src in imgList" :key="src">
-      <img :src="src" v-show="false" />
+      <img :src="src" v-show="false" alt="" />
     </template>
     <DetailModal :info="rowInfo" @register="registerModal" />
     <BasicTable @register="register" class="error-handle-table">
@@ -16,12 +16,17 @@
           {{ t('sys.errorLog.fireAjaxError') }}
         </a-button>
       </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            { label: t('sys.errorLog.tableActionDesc'), onClick: handleDetail.bind(null, record) },
-          ]"
-        />
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: t('sys.errorLog.tableActionDesc'),
+                onClick: handleDetail.bind(null, record),
+              },
+            ]"
+          />
+        </template>
       </template>
     </BasicTable>
   </div>
@@ -52,7 +57,7 @@
       width: 80,
       title: 'Action',
       dataIndex: 'action',
-      slots: { customRender: 'action' },
+      // slots: { customRender: 'action' },
     },
   });
   const [registerModal, { openModal }] = useModal();