fix: 合并单元格页面由于 ant-design-vue 升级 v3 版本，页面报 Warning: columns.customRender 即将废弃，c…

…olumns.customRender 用 columns. customCell 替换 (#2520) * fix(MergeHeader): 组件/Table/合并单元格页面修改 Tabel.title 值为合并单元格、修改 Table.bordered 值为 true 更好显示合并单元格效果 * fix(tableData): 由于 ant-design-vue 升级 v3 版本，页面报 Warning: columns.customRender 即将废弃

fix: 合并单元格页面由于 ant-design-vue 升级 v3 版本，页面报 Warning: columns.customRender 即将废弃，c…
…olumns.customRender 用 columns. customCell 替换 (#2520) * fix(MergeHeader): 组件/Table/合并单元格页面修改 Tabel.title 值为合并单元格、修改 Table.bordered 值为 true 更好显示合并单元格效果 * fix(tableData): 由于 ant-design-vue 升级 v3 版本，页面报 Warning: columns.customRender 即将废弃
刘大卫 · GitHub
1 parent dab977ff
Showing 2 changed files with 18 additions and 29 deletions
src/views/demo/table/MergeHeader.vue
src/views/demo/table/tableData.tsx
@@ -14,7 +14,8 @@
     components: { BasicTable },
     setup() {
       const [registerTable] = useTable({
-        title: '多级表头示例',
+        title: '合并单元格',
+        bordered: true,
         api: demoListApi,
         columns: getMergeHeaderColumns(),
       });
@@ -157,29 +157,26 @@ export function getCustomHeaderColumns(): BasicColumn[] {
     },
   ];
 }
-const renderContent = ({ text, index }: { text: any; index: number }) => {
-  const obj: any = {
-    children: text,
-    attrs: {},
-  };
-  if (index === 9) {
-    obj.attrs.colSpan = 0;
-  }
-  return obj;
-};
+
+const cellContent = (_, index) => ({
+  colSpan: index === 9 ? 0 : 1,
+});
+
 export function getMergeHeaderColumns(): BasicColumn[] {
   return [
     {
       title: 'ID',
       dataIndex: 'id',
       width: 300,
-      customRender: renderContent,
+      customCell: (_, index) => ({
+        colSpan: index === 9 ? 6 : 1,
+      }),
     },
     {
       title: '姓名',
       dataIndex: 'name',
       width: 300,
-      customRender: renderContent,
+      customCell: cellContent,
     },
     {
       title: '地址',
@@ -187,19 +184,10 @@ export function getMergeHeaderColumns(): BasicColumn[] {
       colSpan: 2,
       width: 120,
       sorter: true,
-      customRender: ({ text, index }: { text: any; index: number }) => {
-        const obj: any = {
-          children: text,
-          attrs: {},
-        };
-        if (index === 2) {
-          obj.attrs.rowSpan = 2;
-        }
-        if (index === 3) {
-          obj.attrs.colSpan = 0;
-        }
-        return obj;
-      },
+      customCell: (_, index) => ({
+        rowSpan: index === 2 ? 2 : 1,
+        colSpan: index === 3 || index === 9 ? 0 : 1,
+      }),
     },
     {
       title: '编号',
@@ -209,19 +197,19 @@ export function getMergeHeaderColumns(): BasicColumn[] {
         { text: 'Male', value: 'male', children: [] },
         { text: 'Female', value: 'female', children: [] },
       ],
-      customRender: renderContent,
+      customCell: cellContent,
     },
     {
       title: '开始时间',
       dataIndex: 'beginTime',
       width: 200,
-      customRender: renderContent,
+      customCell: cellContent,
     },
     {
       title: '结束时间',
       dataIndex: 'endTime',
       width: 200,
-      customRender: renderContent,
+      customCell: cellContent,
     },
   ];
 }