tav-ui

import { ETableProEmits } from './const'; import type { TableProExtendApis } from './hooks/useExtendInstance'; import type { ExtractPropTypes, PropType, VNode } from 'vue'; import type { VxeColumnPropTypes, VxeColumnSlotTypes, VxeGridEventProps, VxeGridInstance, VxeGridPropTypes, VxeTableDefines, VxeTableEventProps, VxeTablePropTypes } from 'vxe-table'; import type { PagerConfig, TableProApi, TableProCustomActionConfig, TableProFilterFormConfig } from './typings'; export declare type TableProColumn = VxeTableDefines.ColumnOptions & { /** 使用customrender后template插槽失效，如果想使用template插槽，请使用slot-default */ customRender?: (params: VxeColumnSlotTypes.DefaultSlotParams) => JSX.Element | VNode | string; children?: TableProColumn[]; /** vxetable内部会对column上的属性按照内部定义筛选 */ params?: VxeColumnPropTypes.Params; }; export declare type TableProColumnInfo = VxeTableDefines.ColumnInfo & { params?: VxeColumnPropTypes.Params; }; export declare type TableProFooter = VxeTablePropTypes.FooterMethod; /** table 实例 */ export declare type TableProInstance = VxeGridInstance; /** 扩展后的 table 实例 */ export interface ITableProInstance { instance: TableProInstance & TableProExtendApis; } /** table 支持的事件类型 */ export declare type TableProEvent = VxeTableEventProps & VxeGridEventProps; /** table 支持的事件名称 */ export declare type TableProEmits = keyof typeof ETableProEmits; export declare type TableProGridEmit = (event: TableProEmits, ...args: any[]) => void; export declare const tableProEmits: ("Update:data" | "KeydownStart" | "Keydown" | "KeydownEnd" | "Paste" | "Copy" | "Cut" | "CurrentChange" | "RadioChange" | "CheckboxChange" | "CheckboxAll" | "CheckboxRangeStart" | "CheckboxRangeChange" | "CheckboxRangeEnd" | "CellClick" | "CellDblclick" | "CellMenu" | "CellMouseenter" | "CellMouseleave" | "CellSelected" | "HeaderCellClick" | "HeaderCellDblclick" | "HeaderCellMenu" | "FooterCellClick" | "FooterCellDblclick" | "FooterCellMenu" | "ClearMerge" | "SortChange" | "ClearSort" | "FilterChange" | "FilterVisible" | "ClearFilter" | "ResizableChange" | "ToggleRowExpand" | "ToggleTreeExpand" | "MenuClick" | "EditClosed" | "EditActived" | "EditDisabled" | "ValidError" | "Scroll" | "Custom" | "ChangeFnr" | "OpenFnr" | "FnrChange" | "FnrFind" | "FnrFindAll" | "FnrReplace" | "FnrReplaceAll" | "CellAreaCopy" | "CellAreaCut" | "CellAreaPaste" | "CellAreaMerge" | "ClearCellAreaMerge" | "HeaderCellAreaSelection" | "CellAreaSelectionStart" | "CellAreaSelectionEnd" | "CellAreaExtensionStart" | "CellAreaExtensionEnd" | "CellAreaArrowsStart" | "CellAreaArrowsEnd" | "ActiveCellChangeStart" | "ActiveCellChangeEnd" | "PageChange" | "FormSubmit" | "FormSubmitInvalid" | "FormReset" | "FormCollapse" | "FormToggleCollapse" | "ToolbarButtonClick" | "ToolbarToolClick" | "Zoom" | "ApiSuccess" | "ApiError")[]; /** table props */ export declare const tableProProps: { /** * 表格大小 https://vxetable.cn/#/table/base/size */ size: { type: PropType<import("vxe-table").SizeType>; default: string; }; /** 唯一标识（被某些特定的功能所依赖） */ id: { type: PropType<string>; }; /** * 表格高度（默认为铺满网页）https://vxetable.cn/#/table/base/autoHeight * 当前默认值为 'auto' 随父级高度变化（必须开启autoresize，当前默认开启） * 1. 如果要随父级高度变化，此处必须设置为 'auto'。然后在外层包一个带有指定高度的父容器, 跟随父级走的话高度会跳动 * 2. 不追随父级变化，此处可以直接设置 500。即高度为 500px * 3. 当高度设置为数字后还有固定表头的作用 https://vxetable.cn/#/table/base/height * 4. 默认铺满全屏 */ height: { type: PropType<VxeTablePropTypes.Height>; default: string; }; /** 表格最大高度（超出自动出现 y轴滚动条） */ maxHeight: { type: PropType<VxeTablePropTypes.MaxHeight>; }; minHeight: { type: PropType<VxeTablePropTypes.MinHeight>; }; /** * 表格数据（数据为响应式，在使用时建议每次变化直接赋值，与 loadData 行为一致，更新数据是不会重置状态） * 1. 参考 https://vxetable.cn/#/grid/api * 2. replace 'dataSource' */ data: { type: PropType<any[]>; }; /** * 表格自动调整 * 开启虚拟滚动后必须指定行高，想用动态行高则需关闭虚拟滚动 */ resizable: { type: PropType<boolean>; default: boolean; }; /** 是否带有斑马纹（需要注意的是，在可编辑表格场景下，临时插入的数据不会有斑马纹样式） */ stripe: { type: PropType<boolean>; default: boolean; }; /** 是否为圆角边框 */ round: { type: PropType<boolean>; default: boolean; }; /** 是否带有边框 */ border: { type: PropType<VxeTablePropTypes.Border>; default: string; }; /** 表格是否显示加载中 */ loading: { type: PropType<boolean>; default: boolean; }; /** 所有列的对齐方式 */ align: { type: PropType<VxeTablePropTypes.Align>; default: string; }; /** 表头的对齐方式 */ headerAlign: { type: PropType<VxeTablePropTypes.Align>; default: string; }; /** 表尾的对齐方式 */ footerAlign: { type: PropType<VxeTablePropTypes.Align>; default: string; }; /** 是否显示表头 */ showHeader: { type: PropType<boolean>; default: boolean; }; /** 是否显示表尾 */ showFooter: { type: PropType<boolean>; }; /** 是否高亮当前行 */ highlightCurrentRow: { type: PropType<boolean>; default: boolean; }; /** hover 时高亮行 */ highlightHoverRow: { type: PropType<boolean>; default: boolean; }; /** 是否高亮当前列 */ highlightCurrentColumn: { type: PropType<boolean>; default: boolean; }; /** hover 时高亮列 */ highlightHoverColumn: { type: PropType<boolean>; default: boolean; }; /** 高亮单元格 */ highlightCell: { type: PropType<boolean>; default: boolean; }; /** 表尾的数据获取方法，返回一个二维数组 */ footerMethod: { type: PropType<VxeTablePropTypes.FooterMethod<import("vxe-table").VxeTableDataRow>>; }; /** 给行附加 className */ rowClassName: { type: PropType<VxeTablePropTypes.RowClassName<import("vxe-table").VxeTableDataRow>>; }; /** 给单元格附加 className */ cellClassName: { type: PropType<VxeTablePropTypes.CellClassName<import("vxe-table").VxeTableDataRow>>; }; /** 给表头的行附加 className */ headerRowClassName: { type: PropType<VxeTablePropTypes.HeaderRowClassName<import("vxe-table").VxeTableDataRow>>; }; /** 给表头的单元格附加 className */ headerCellClassName: { type: PropType<VxeTablePropTypes.HeaderCellClassName<import("vxe-table").VxeTableDataRow>>; }; /** 给表尾的行附加 className */ footerRowClassName: { type: PropType<VxeTablePropTypes.FooterRowClassName<import("vxe-table").VxeTableDataRow>>; }; /** 给表尾的单元格附加 className */ footerCellClassName: { type: PropType<VxeTablePropTypes.FooterCellClassName<import("vxe-table").VxeTableDataRow>>; }; /** 给单元格附加样式 */ cellStyle: { type: PropType<VxeTablePropTypes.CellStyle<import("vxe-table").VxeTableDataRow>>; }; /** 给表头单元格附加样式 */ headerCellStyle: { type: PropType<VxeTablePropTypes.HeaderCellStyle<import("vxe-table").VxeTableDataRow>>; }; /** 给表尾单元格附加样式 */ footerCellStyle: { type: PropType<VxeTablePropTypes.FooterCellStyle<import("vxe-table").VxeTableDataRow>>; }; /** 给行附加样式 */ rowStyle: { type: PropType<VxeTablePropTypes.RowStyle<import("vxe-table").VxeTableDataRow>>; }; /** 给表头行附加样式 */ headerRowStyle: { type: PropType<VxeTablePropTypes.HeaderRowStyle<import("vxe-table").VxeTableDataRow>>; }; /** 给表头行附加样式 */ footerRowStyle: { type: PropType<VxeTablePropTypes.FooterRowStyle<import("vxe-table").VxeTableDataRow>>; }; /** 临时合并指定的单元格 (不能用于展开行，不建议用于固定列、树形结构) */ mergeCells: { type: PropType<VxeTablePropTypes.MergeCells<import("vxe-table").VxeTableDataRow>>; }; /** 临时合并表尾 (不能用于展开行，不建议用于固定列、树形结构) */ mergeFooterItems: { type: PropType<VxeTablePropTypes.MergeFooterItems<import("vxe-table").VxeTableDataRow>>; }; /** 自定义合并函数，返回计算后的值 (不能用于虚拟滚动、展开行，不建议用于固定列、树形结构) */ spanMethod: { type: PropType<VxeTablePropTypes.SpanMethod<import("vxe-table").VxeTableDataRow>>; }; /** 表尾合并行或列，返回计算后的值 (不能用于虚拟滚动、展开行，不建议用于固定列、树形结构) */ footerSpanMethod: { type: PropType<VxeTablePropTypes.FooterSpanMethod<import("vxe-table").VxeTableDataRow>>; }; /** 设置所有内容过长时显示为省略号（如果是固定列建议设置该值，提升渲染速度） */ showOverflow: { type: PropType<VxeTablePropTypes.ShowOverflow>; default: boolean; }; /** 设置表头所有内容过长时显示为省略号 */ showHeaderOverflow: { type: PropType<VxeTablePropTypes.ShowOverflow>; default: boolean; }; /** 设置表尾所有内容过长时显示为省略号 */ showFooterOverflow: { type: PropType<VxeTablePropTypes.ShowOverflow>; default: boolean; }; /** 保持原始值的状态，被某些功能所依赖，比如编辑状态、还原数据等（开启后影响性能，具体取决于数据量） */ keepSource: { type: PropType<boolean>; default: boolean; }; /** 自动监听父元素的变化去重新计算表格（对于父元素可能存在动态变化、显示隐藏的容器中、列宽异常等场景中的可能会用到） */ autoResize: { type: PropType<boolean>; }; resizeConfig: { type: PropType<VxeTablePropTypes.ResizeConfig>; default: () => { refreshDelay: number; }; }; /** 自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来控制显示/隐藏切换时可能会用到） */ syncResize: { type: PropType<VxeTablePropTypes.SyncResize>; }; /** 横向虚拟滚动配置（不支持展开行） */ scrollX: { type: PropType<VxeTablePropTypes.ScrollX>; default: () => { enabled: boolean; gt: number; /** 设置过大会出现空白间隙，设置为0会实时渲染但是会卡顿 */ oSize: number; }; }; /** 纵向虚拟滚动配置（不支持展开行） */ scrollY: { type: PropType<VxeTablePropTypes.ScrollY>; default: () => { enabled: boolean; mode: string; gt: number; /** 设置过大会出现空白间隙，设置为0会实时渲染但是会卡顿 */ oSize: number; }; }; /** * 列配置信息（详情查看：https://vxetable.cn/#/grid/api） * 1. useKey 代替原有的全局属性 columnKey，是否需要为每一列的 VNode 设置 key 属性（非特殊情况下不需要使用） */ columnConfig: { type: PropType<VxeTablePropTypes.ColumnConfig>; default: () => { resizable: boolean; }; }; /** * 行配置信息（详情查看：https://vxetable.cn/#/grid/api） * 1. useKey 代替原有的全局属性 rowKey，是否需要为每一列的 VNode 设置 key 属性（非特殊情况下不需要使用） * 2. keyField 代替原有的全局属性 rowId，自定义行数据唯一主键的字段名（默认自动生成），默认值为 _X_ROW_KEY */ rowConfig: { type: PropType<VxeTablePropTypes.RowConfig>; default: () => { keyField: string; height: number; }; }; /** * 自定义列配置项（详情查看：https://vxetable.cn/#/grid/api） */ customConfig: { type: PropType<VxeTablePropTypes.CustomConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 列宽拖动配置项（详情查看：https://vxetable.cn/#/grid/api） */ resizableConfig: { type: PropType<VxeTablePropTypes.ResizableConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 序号配置项（详情查看：https://vxetable.cn/#/grid/api） */ seqConfig: { type: PropType<VxeTablePropTypes.SeqConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 排序配置项（详情查看：https://vxetable.cn/#/grid/api） */ sortConfig: { type: PropType<VxeTablePropTypes.SortConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 筛选配置项（详情查看：https://vxetable.cn/#/grid/api） */ filterConfig: { type: PropType<VxeTablePropTypes.FilterConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 筛选是否互斥 */ filterExclusion: { type: BooleanConstructor; default: boolean; }; /** * 单选框配置项（详情查看：https://vxetable.cn/#/grid/api） */ radioConfig: { type: PropType<VxeTablePropTypes.RadioConfig<import("vxe-table").VxeTableDataRow> & { enabled: boolean; }>; default: () => { enabled: boolean; highlight: boolean; }; }; /** * 复选框配置项（详情查看：https://vxetable.cn/#/grid/api） */ checkboxConfig: { type: PropType<Omit<VxeTablePropTypes.CheckboxConfig<import("vxe-table").VxeTableDataRow>, "reserve"> & { enabled?: boolean | undefined; cache?: boolean | undefined; }>; default: () => { enabled: boolean; range: boolean; highlight: boolean; cache: boolean; }; }; /** * tooltip 配置项（详情查看：https://vxetable.cn/#/grid/api） */ tooltipConfig: { type: PropType<VxeTablePropTypes.TooltipConfig<import("vxe-table").VxeTableDataRow>>; default: () => { theme: string; }; }; /** * 导出配置项（详情查看：https://vxetable.cn/#/grid/api） */ exportConfig: { type: PropType<VxeTablePropTypes.ExportConfig>; }; /** * 导入配置项（详情查看：https://vxetable.cn/#/grid/api） */ importConfig: { type: PropType<VxeTablePropTypes.ImportConfig>; }; /** * 打印配置项（详情查看：https://vxetable.cn/#/grid/api） */ printConfig: { type: PropType<VxeTablePropTypes.PrintConfig>; }; /** * 鼠标配置项（详情查看：https://vxetable.cn/#/grid/api） * 部分属性需购买 pro 才能支持 */ mouseConfig: { type: PropType<VxeTablePropTypes.MouseConfig>; }; /** * 区域选取配置项（详情查看：https://vxetable.cn/#/grid/api） * 全部属性需购买 pro 才能支持 */ areaConfig: { type: PropType<VxeTablePropTypes.AreaConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 查找/替换配置项（详情查看：https://vxetable.cn/#/grid/api） * 全部属性需购买 pro 才能支持 */ fnrConfig: { type: PropType<VxeTablePropTypes.FNRConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 按键配置项（详情查看：https://vxetable.cn/#/grid/api） * 部分属性需购买 pro 才能支持 */ keyboardConfig: { type: PropType<VxeTablePropTypes.KeyboardConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 复制/粘贴配置项（详情查看：https://vxetable.cn/#/grid/api） * 全部属性需购买 pro 才能支持 */ clipConfig: { type: PropType<VxeTablePropTypes.ClipConfig<import("vxe-table").VxeTableDataRow>>; }; /** 表格筛选组件modal类名 */ filterModalClassName: { type: StringConstructor; }; /** * 展开行配置项（不支持虚拟滚动）（详情查看：https://vxetable.cn/#/grid/api） */ expandConfig: { type: PropType<VxeTablePropTypes.ExpandConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 树形结构配置项（详情查看：https://vxetable.cn/#/grid/api） */ treeConfig: { type: PropType<VxeTablePropTypes.TreeConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 快捷菜单配置项（详情查看：https://vxetable.cn/#/grid/api） */ menuConfig: { type: PropType<VxeTablePropTypes.MenuConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 可编辑配置项（详情查看：https://vxetable.cn/#/grid/api） */ editConfig: { type: PropType<VxeTablePropTypes.EditConfig<import("vxe-table").VxeTableDataRow>>; }; /** * 校验配置项（详情查看：https://vxetable.cn/#/grid/api） * 1. autoPos 是否自动定位到校验不通过的单元格 */ validConfig: { type: PropType<VxeTablePropTypes.ValidConfig<import("vxe-table").VxeTableDataRow>>; }; /** 校验规则配置项（详情查看：https://vxetable.cn/#/grid/api） */ editRules: { type: PropType<VxeTablePropTypes.EditRules<import("vxe-table").VxeTableDataRow>>; }; /** 空数据时显示的内容（详情查看：https://vxetable.cn/#/grid/api） */ emptyText: { type: PropType<string>; }; /** * 空内容渲染配置项（详情查看：https://vxetable.cn/#/grid/api），empty-render 的优先级大于 empty-text * 1. name: 渲染器名称 */ emptyRender: { type: PropType<VxeTablePropTypes.EmptyRender>; }; /** 列配置（详情查看：https://vxetable.cn/#/grid/api） */ columns: { type: PropType<VxeGridPropTypes.Columns<import("vxe-table").VxeTableDataRow>>; }; /** 分页配置项（详情查看：https://vxetable.cn/#/grid/api） */ pagerConfig: { type: PropType<PagerConfig>; default: () => { size: string; layouts: string[]; pageSize: number; pageSizes: number[]; controller: string; }; }; /** * 数据代理（详情查看：https://vxetable.cn/#/table/grid/proxy） * 1. 通过配置 proxy-config 参数，默认直接读取结果，响应结果应该为数组 * 2. 可以通过 props 修改默认值，由 pager-config 代理数据转换，只需要配置好数据源即可；非常简单就可以渲染一个表格，从重复写冗余的代码中解放出来 * 3. 接收一个 Promise */ proxyConfig: { type: PropType<VxeGridPropTypes.ProxyConfig<import("vxe-table").VxeTableDataRow>>; }; /** 工具栏配置（详情查看：https://vxetable.cn/#/grid/api） */ toolbarConfig: { type: PropType<VxeGridPropTypes.ToolbarConfig>; }; /** 表单配置项（详情查看：https://vxetable.cn/#/grid/api） */ formConfig: { type: PropType<VxeGridPropTypes.FormConfig>; }; /** 缩放配置项（详情查看：https://vxetable.cn/#/grid/api） */ zoomConfig: { type: PropType<VxeGridPropTypes.ZoomConfig>; }; /** 控制 filterform & customaction 整体显示与隐藏 */ showOperations: { type: BooleanConstructor; default: boolean; }; /** 表格过滤表单 filterform 配置 */ filterFormConfig: { type: PropType<TableProFilterFormConfig>; default: () => { enabled: boolean; }; }; /** 自定义按钮 customaction 配置 */ customActionConfig: { type: PropType<TableProCustomActionConfig>; default: () => { enabled: boolean; }; }; /** 异步数据是分页还是列表 */ apiType: { type: PropType<"pager" | "list">; default: string; }; /** 异步数据接口 */ api: { type: PropType<TableProApi<Promise<any>>>; }; /** 异步数据接口请求前函数 */ beforeApi: { type: PropType<TableProApi<any>>; }; /** 异步数据接口请求后函数 */ afterApi: { type: PropType<(...arg: any[]) => any>; }; /** 异步数据接口配置 */ apiSetting: { type: PropType<Partial<{ pageField: string; sizeField: string; listField: string; totalField: string; }>>; default: () => { pageField: string; sizeField: string; listField: string; totalField: string; }; }; /** 表格数据是否立即加载 */ immediate: { type: BooleanConstructor; default: boolean; }; /** vxetable 默认会自动还原滚动条，这里只控制筛选、翻页、点击刷新后是否滚到顶部 */ scrollTopActions: { type: PropType<("paginate" | "refresh")[]>; default: () => string[]; }; /** 给table填充颜色，将table和filterform区分开 */ fillInner: { type: BooleanConstructor; default: boolean; }; /** 覆盖tooltip */ showTooltip: { type: BooleanConstructor; default: boolean; }; /** 是否使用固定行高 */ fixedLineHeight: { type: BooleanConstructor; default: boolean; }; /** 接权限相关参数 */ permission: { type: PropType<import("../../permission/src/PermissionQuery/types").PermissionQueryContent | import("../../permission/src/PermissionDataQuery/types").PermissionQueryDataContent | { apiParams: import("../../permission/src/types").ApiPermissionParams | import("../../permission/src/types").ApiPermissionDataParams; apiPermission?: ((params: import("../../permission/src/types").ApiPermissionParams) => Promise<any>) | undefined; apiPermissionData?: ((params: import("../../permission/src/types").ApiPermissionDataParams) => Promise<any>) | undefined; } | undefined>; }; }; /** table props 类型 */ export declare type TableProProps = ExtractPropTypes<typeof tableProProps>;