Browse Source

fix: 合并单元格页面 由于 ant-design-vue 升级 v3 版本,页面报 Warning: columns.customRender 即将废弃,columns.customRender 用 columns. customCell 替换 (#2520)

* fix(MergeHeader): 组件/Table/合并单元格页面 修改 Tabel.title 值为 合并单元格、修改 Table.bordered 值为 true 更好显示合并单元格效果

* fix(tableData): 由于 ant-design-vue 升级 v3 版本,页面报 Warning: columns.customRender 即将废弃
pull/2522/head
刘大卫 4 years ago
committed by GitHub
parent
commit
0dc2f1496b
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 3
      src/views/demo/table/MergeHeader.vue
  2. 44
      src/views/demo/table/tableData.tsx

3
src/views/demo/table/MergeHeader.vue

@ -14,7 +14,8 @@
components: { BasicTable },
setup() {
const [registerTable] = useTable({
title: '多级表头示例',
title: '合并单元格',
bordered: true,
api: demoListApi,
columns: getMergeHeaderColumns(),
});

44
src/views/demo/table/tableData.tsx

@ -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,
},
];
}

Loading…
Cancel
Save