提交 8d7d0835 作者: vben

feat(table): add summaryData prop #163

上级 31ff0559
...@@ -45,7 +45,7 @@ ...@@ -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',
......
<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 @@ ...@@ -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 @@ ...@@ -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( ...@@ -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( ...@@ -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 = { ...@@ -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 = { ...@@ -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> { ...@@ -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 @@ ...@@ -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 @@ ...@@ -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;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论