fix(table): 彻底修复column.slots已废弃的antd报错, 所有用到的demo页修改为antd 3.x v-slot:headerCell 和 v-slot:bodyCell 写法 (#2030)

Co-authored-by: 苗大 <v.caoshm@yoozoo.com>

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,
       });

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' },
         },
       });
 

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,
         },
       });

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,
         },
       });

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,
         },
       });

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) {

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>

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' },
         },
       });
 

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' },
         },
       });

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>

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: '定高/头部自定义',

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;
 }

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();