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