github
/
jeecg-boot-vue3
mirror of https://github.com/jeecgboot/jeecgboot-vue3
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[issues/179] table老的slots写法报警告 

[issues/179] 列表页面多了复选框后合计行显示错位问题 #634
 [issues/179] 表格固定列，加了合计后，合计栏前后会发生错位 #622
pull/663/head
zhangdaiscott 2023-07-18 17:31:11 +08:00
parent 8836149607
commit 08383220c4
5 changed files with 105 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Table/src/BasicTable.vue
View File

@ -18,7 +18,8 @@
<!-- https://antdv.com/docs/vue/migration-v3-cn -->
<a-form-item-rest>
<Table ref="tableElRef" v-bind="getBindValues" :rowClassName="getRowClassName" v-show="getEmptyDataIsShowTable" @resizeColumn="handleResizeColumn" @change="handleTableChange">
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
<!-- antd的原生插槽直接传递 -->
<template #[item]="data" v-for="item in slotNamesGroup.native" :key="item">
<slot :name="item" v-bind="data || {}"></slot>
</template>
<template #headerCell="{ column }">
@ -29,14 +30,21 @@
</template>
<!-- 增加对antdv3.x兼容 -->
<template #bodyCell="data">
<!-- update-begin--author:liaozhiyang---date:220230717---for：【issues-179】antd3 一些警告以及报错(针对表格) -->
<template v-if="data.column.slotsBak?.customRender">
<slot :name="data.column.slotsBak.customRender" v-bind="data || {}"></slot>
</template>
<template v-else>
<slot name="bodyCell" v-bind="data || {}"></slot>
</template>
<!-- update-begin--author:liaozhiyang---date:22030717---for：【issues-179】antd3 一些警告以及报错(针对表格) -->
</template>
</Table>
</a-form-item-rest>
</div>
</template>
<script lang="ts">
import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam } from './types/table';
import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam, BasicColumn } from './types/table';
import { defineComponent, ref, computed, unref, toRaw, inject, watchEffect } from 'vue';
import { Table } from 'ant-design-vue';
@ -216,7 +224,7 @@
const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
const { getFooterProps } = useTableFooter(getProps, getScrollRef, tableElRef, getDataSourceRef);
const { getFooterProps } = useTableFooter(getProps, slots, getScrollRef, tableElRef, getDataSourceRef);
const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } = useTableForm(getProps, slots, fetch, getLoading);
@ -273,6 +281,8 @@
[`${prefixCls}-form-container`]: values.useSearchForm,
[`${prefixCls}--inset`]: values.inset,
[`${prefixCls}-col-max-width`]: getMaxColumnWidth.value != null,
// 是否显示表尾合计
[`${prefixCls}--show-summary`]: values.showSummary,
},
];
});
@ -325,6 +335,33 @@
};
createTableContext({ ...tableAction, wrapRef, getBindValues });
// update-begin--author:sunjianlei---date:220230718---for：【issues/179】兼容新老slots写法，移除控制台警告
// 获取分组之后的slot名称
const slotNamesGroup = computed<{
// AntTable原生插槽
native: string[];
// 列自定义插槽
custom: string[];
}>(() => {
const native: string[] = [];
const custom: string[] = [];
const columns = unref<Recordable[]>(getViewColumns) as BasicColumn[];
const allCustomRender = columns.map<string>((column) => column.slotsBak?.customRender);
for (const name of Object.keys(slots)) {
// 过滤特殊的插槽
if (['bodyCell'].includes(name)) {
continue;
}
if (allCustomRender.includes(name)) {
custom.push(name);
} else {
native.push(name);
}
}
return { native, custom };
});
// update-end--author:sunjianlei---date:220230718---for：【issues/179】兼容新老slots写法，移除控制台警告
expose(tableAction);
emit('register', tableAction, formActions);
@ -355,7 +392,7 @@
selectHeaderProps,
isCustomSelection,
// update-end--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
slotNamesGroup,
};
},
});
@ -494,5 +531,16 @@
}
// ------ 统一设置表格列最大宽度 ------
// update-begin--author:sunjianlei---date:220230718---for：【issues/622】修复表尾合计错位的问题
&--show-summary {
.ant-table > .ant-table-footer {
padding: 12px 0 0;
}
.ant-table.ant-table-bordered > .ant-table-footer {
border: 0;
}
}
// update-end--author:sunjianlei---date:220230718---for：【issues/622】修复表尾合计错位的问题
}
</style>

32
src/components/Table/src/components/TableFooter.vue
View File

@ -2,7 +2,7 @@
<Table
v-if="summaryFunc || summaryData"
:showHeader="false"
:bordered="false"
:bordered="bordered"
:pagination="false"
:dataSource="getDataSource"
:rowKey="(r) => r[rowKey]"
@ -28,6 +28,10 @@
name: 'BasicTableFooter',
components: { Table },
props: {
bordered: {
type: Boolean,
default: false,
},
summaryFunc: {
type: Function as PropType<Fn>,
},
@ -38,6 +42,8 @@
type: Object as PropType<Recordable>,
},
rowKey: propTypes.string.def('key'),
// 是否有展开列
hasExpandedRow: propTypes.bool,
},
setup(props) {
const table = useTableContext();
@ -66,8 +72,14 @@
const hasRowSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_ROW_KEY));
const hasIndexSummary = dataSource.some((item) => Reflect.has(item, SUMMARY_INDEX_KEY));
// 是否有序号列
let hasIndexCol = false;
// 是否有选择列
let hasSelection = table.getRowSelection() && hasRowSummary
if (index !== -1) {
if (hasIndexSummary) {
hasIndexCol = true;
columns[index].customRender = ({ record }) => record[SUMMARY_INDEX_KEY];
columns[index].ellipsis = false;
} else {
@ -75,15 +87,27 @@
}
}
if (table.getRowSelection() && hasRowSummary) {
if (hasSelection) {
const isFixed = columns.some((col) => col.fixed === 'left');
columns.unshift({
width: 60,
width: 50,
title: 'selection',
key: 'selectionKey',
align: 'center',
...(isFixed ? { fixed: 'left' } : {}),
customRender: ({ record }) => record[SUMMARY_ROW_KEY],
customRender: ({ record }) => hasIndexCol ? '' : record[SUMMARY_ROW_KEY],
});
}
if (props.hasExpandedRow) {
const isFixed = columns.some((col) => col.fixed === 'left');
columns.unshift({
width: 50,
title: 'expandedRow',
key: 'expandedRowKey',
align: 'center',
...(isFixed ? { fixed: 'left' } : {}),
customRender: () => '',
});
}
return columns;

10
src/components/Table/src/hooks/useColumns.ts
View File

@ -99,7 +99,7 @@ function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: Bas
export function useColumns(
propsRef: ComputedRef<BasicTableProps>,
getPaginationRef: ComputedRef<boolean | PaginationProps>,
handleCustomSelectColumn: Fn,
handleCustomSelectColumn: Fn
) {
const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
let cacheColumns = unref(propsRef).columns;
@ -150,6 +150,14 @@ export function useColumns(
return hasPermission(column.auth) && isIfShow(column);
})
.map((column) => {
// update-begin--author:liaozhiyang---date:20230718---for: 【issues-179】antd3 一些警告以及报错(针对表格)
if(column.slots?.customRender) {
// slots的备份，兼容老的写法，转成新写法避免控制台警告
column.slotsBak = column.slots;
delete column.slots;
}
// update-end--author:liaozhiyang---date:20230718---for: 【issues-179】antd3 一些警告以及报错(针对表格)
const { slots, customRender, format, edit, editRow, flag, title: metaTitle } = column;
if (!slots || !slots?.title) {

16
src/components/Table/src/hooks/useTableFooter.ts
View File

@ -1,4 +1,4 @@
import type { ComputedRef, Ref } from 'vue';
import type { ComputedRef, Ref, Slots } from 'vue';
import type { BasicTableProps } from '../types/table';
import { unref, computed, h, nextTick, watchEffect } from 'vue';
import TableFooter from '../components/TableFooter.vue';
@ -6,6 +6,7 @@ import { useEventListener } from '/@/hooks/event/useEventListener';
export function useTableFooter(
propsRef: ComputedRef<BasicTableProps>,
slots: Slots,
scrollRef: ComputedRef<{
x: string | number | true;
y: Nullable<number>;
@ -18,9 +19,18 @@ export function useTableFooter(
return (unref(getDataSourceRef) || []).length === 0;
});
// 是否有展开行
const hasExpandedRow = computed(() => Object.keys(slots).includes('expandedRowRender'))
const getFooterProps = computed((): Recordable | undefined => {
const { summaryFunc, showSummary, summaryData } = unref(propsRef);
return showSummary && !unref(getIsEmptyData) ? () => h(TableFooter, { summaryFunc, summaryData, scroll: unref(scrollRef) }) : undefined;
const { summaryFunc, showSummary, summaryData, bordered } = unref(propsRef);
return showSummary && !unref(getIsEmptyData) ? () => h(TableFooter, {
bordered,
summaryFunc,
summaryData,
scroll: unref(scrollRef),
hasExpandedRow: hasExpandedRow.value
}) : undefined;
});
watchEffect(() => {

2
src/components/Table/src/types/table.ts
View File

@ -425,6 +425,8 @@ export interface BasicColumn extends ColumnProps {
customTitle?: VueNode;
slots?: Recordable;
// slots的备份，兼容老的写法，转成新写法避免控制台警告
slotsBak?: Recordable;
// Whether to hide the column by default, it can be displayed in the column configuration
defaultHidden?: boolean;