😎增加VxeTable合计功能

This commit is contained in:
zuohuaijun 2024-10-10 10:24:47 +08:00
parent 8d7e7ce61b
commit 8aa1117e1a

View File

@ -1,8 +1,9 @@
import { dayjs } from 'element-plus';
import { reactive } from 'vue';
import { VxeGridProps, VxeGridPropTypes, VxeComponentSizeType } from 'vxe-table';
import { dayjs } from 'element-plus';
import { useThemeConfig } from '/@/stores/themeConfig';
import { merge } from 'lodash-es';
import { VxeGridProps, VxeGridPropTypes, VxeComponentSizeType } from 'vxe-table';
import { VxeTablePropTypes } from 'vxe-pc-ui/types/components/table';
// 根据主题配置获取组件大小
const vxeSize: VxeComponentSizeType = useThemeConfig().themeConfig.globalComponentSize == 'small' ? 'mini' : useThemeConfig().themeConfig.globalComponentSize == 'default' ? 'small' : 'medium';
@ -11,11 +12,17 @@ const vxeSize: VxeComponentSizeType = useThemeConfig().themeConfig.globalCompone
* @param {String} id ;
* @param {String} id name:表格名称;
* @param {VxeGridPropTypes.Columns<any>} columns ;
* @param {Boolean} showFooter ;
* @param {any} footerData ;
* @param {VxeTablePropTypes.FooterMethod<any>} footerMethod ;
*/
interface iVxeOption {
id?: string;
name?: string;
columns: VxeGridPropTypes.Columns<any>;
showFooter?: boolean;
footerData?: any;
footerMethod?: VxeTablePropTypes.FooterMethod<any>;
}
/**
@ -36,6 +43,9 @@ export const useVxeTable = <T>(opt: iVxeOption, extras?: VxeGridProps<T>) => {
align: 'center', // 自动监听父元素的变化去重新计算表格(对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到)
// data: [] as Array<T>,
columns: opt.columns,
showFooter: opt.showFooter,
footerData: opt.footerData,
footerMethod: opt.footerMethod,
toolbarConfig: {
size: vxeSize,
slots: { buttons: 'toolbar_buttons', tools: 'toolbar_tools' },