mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 19:44:50 +08:00
feat(table): add summaryData prop #163
This commit is contained in:
@@ -45,7 +45,7 @@
|
||||
const { prefixCls } = useDesign('basic-table-action');
|
||||
const table = useTableContext();
|
||||
const getActions = computed(() => {
|
||||
return props.actions.map((action) => {
|
||||
return (props.actions || []).map((action) => {
|
||||
const { popConfirm } = action;
|
||||
return {
|
||||
type: 'link',
|
||||
|
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<Table
|
||||
v-if="summaryFunc"
|
||||
v-if="summaryFunc || summaryData"
|
||||
:showHeader="false"
|
||||
:bordered="false"
|
||||
:pagination="false"
|
||||
@@ -32,6 +32,9 @@
|
||||
summaryFunc: {
|
||||
type: Function as PropType<Fn>,
|
||||
},
|
||||
summaryData: {
|
||||
type: Array as PropType<Recordable[]>,
|
||||
},
|
||||
scroll: {
|
||||
type: Object as PropType<Recordable>,
|
||||
},
|
||||
@@ -41,7 +44,11 @@
|
||||
const table = useTableContext();
|
||||
|
||||
const getDataSource = computed((): Recordable[] => {
|
||||
const { summaryFunc } = props;
|
||||
const { summaryFunc, summaryData } = props;
|
||||
if (summaryData?.length) {
|
||||
summaryData.forEach((item, i) => (item[props.rowKey] = `${i}`));
|
||||
return summaryData;
|
||||
}
|
||||
if (!isFunction(summaryFunc)) {
|
||||
return [];
|
||||
}
|
||||
|
@@ -163,11 +163,11 @@ export function useDataSource(
|
||||
...pageParams,
|
||||
...(useSearchForm ? getFieldsValue() : {}),
|
||||
...searchInfo,
|
||||
...(opt ? opt.searchInfo : {}),
|
||||
...(opt ? opt.sortInfo : {}),
|
||||
...(opt ? opt.filterInfo : {}),
|
||||
...(opt?.searchInfo ?? {}),
|
||||
...sortInfo,
|
||||
...filterInfo,
|
||||
...(opt?.sortInfo ?? {}),
|
||||
...(opt?.filterInfo ?? {}),
|
||||
};
|
||||
if (beforeFetch && isFunction(beforeFetch)) {
|
||||
params = beforeFetch(params) || params;
|
||||
|
@@ -19,9 +19,9 @@ export function useTableFooter(
|
||||
});
|
||||
|
||||
const getFooterProps = computed((): Recordable | undefined => {
|
||||
const { summaryFunc, showSummary } = unref(propsRef);
|
||||
const { summaryFunc, showSummary, summaryData } = unref(propsRef);
|
||||
return showSummary && !unref(getIsEmptyData)
|
||||
? () => h(TableFooter, { summaryFunc, scroll: unref(scrollRef) })
|
||||
? () => h(TableFooter, { summaryFunc, summaryData, scroll: unref(scrollRef) })
|
||||
: undefined;
|
||||
});
|
||||
|
||||
|
@@ -44,6 +44,11 @@ export const basicProps = {
|
||||
default: null,
|
||||
},
|
||||
|
||||
summaryData: {
|
||||
type: Array as PropType<Recordable[]>,
|
||||
default: null,
|
||||
},
|
||||
|
||||
canColDrag: propTypes.bool.def(true),
|
||||
api: {
|
||||
type: Function as PropType<(...arg: any[]) => Promise<any>>,
|
||||
@@ -73,7 +78,7 @@ export const basicProps = {
|
||||
emptyDataIsShowTable: propTypes.bool.def(true),
|
||||
// 额外的请求参数
|
||||
searchInfo: {
|
||||
type: Object as PropType<any>,
|
||||
type: Object as PropType<Recordable>,
|
||||
default: null,
|
||||
},
|
||||
// 使用搜索表单
|
||||
|
@@ -143,6 +143,8 @@ export interface BasicTableProps<T = any> {
|
||||
autoCreateKey?: boolean;
|
||||
// 计算合计行的方法
|
||||
summaryFunc?: (...arg: any) => Recordable[];
|
||||
// 自定义合计表格内容
|
||||
summaryData?: Recordable[];
|
||||
// 是否显示合计行
|
||||
showSummary?: boolean;
|
||||
// 是否可拖拽列
|
||||
|
@@ -70,10 +70,14 @@
|
||||
const getPlaceholderDomStyle = computed(
|
||||
(): CSSProperties => {
|
||||
let height = 0;
|
||||
if ((unref(getShowFullHeaderRef) || !unref(getSplit)) && unref(getShowHeader)) {
|
||||
if (
|
||||
(unref(getShowFullHeaderRef) || !unref(getSplit)) &&
|
||||
unref(getShowHeader) &&
|
||||
!unref(getFullContent)
|
||||
) {
|
||||
height += HEADER_HEIGHT;
|
||||
}
|
||||
if (unref(getShowMultipleTab)) {
|
||||
if (unref(getShowMultipleTab) && !unref(getFullContent)) {
|
||||
height += TABS_HEIGHT;
|
||||
}
|
||||
headerHeightRef.value = height;
|
||||
|
@@ -13,7 +13,7 @@
|
||||
export default defineComponent({
|
||||
components: { BasicTable },
|
||||
setup() {
|
||||
function handleSummary(tableData: any[]) {
|
||||
function handleSummary(tableData: Recordable[]) {
|
||||
const totalNo = tableData.reduce((prev, next) => {
|
||||
prev += next.no;
|
||||
return prev;
|
||||
|
Reference in New Issue
Block a user