vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件,支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
1,811 lines (1,757 loc) • 112 kB
TypeScript
import { RenderFunction, SetupContext, Ref, ComputedRef, ComponentPublicInstance, ComponentInternalInstance, VNode } from 'vue'
import { VXEComponent, VxeComponentBase, VxeEvent, SizeType, ValueOf, VNodeStyle, SlotVNodeType } from './component'
import { VxeTableProEmits, VxeTableProDefines } from './plugins/pro'
import { VxeColumnPropTypes, VxeColumnProps, VxeColumnSlotTypes } from './column'
import { VXETableConfigOptions, VxeGlobalRendererHandles } from './v-x-e-table'
import { VxeToolbarConstructor, VxeToolbarInstance } from './toolbar'
import { VxeTooltipInstance } from './tooltip'
import { VxeGridConstructor } from './grid'
import { VxeMenuPanelInstance } from './menu'
/* eslint-disable no-use-before-define */
/**
* 组件 - 表格
* @example import { VxeTable } from 'vxe-components'
*/
export const VxeTable: VXEComponent<VxeTableProps<any>, VxeTableEventProps<any>, VxeTableSlots<any>>
/**
* 组件 - 表格
*/
export const Table: typeof VxeTable
export type VxeTableInstance<D = any> = ComponentPublicInstance<VxeTableProps<D>, VxeTableConstructor<D>>
export type VxeTableDataRow = Record<string, any>
export interface VxeTableConstructor<D = any> extends VxeComponentBase, VxeTableMethods<D> {
props: Readonly<VxeTableProps<D>>
context: SetupContext<VxeTableEmits>
instance: ComponentInternalInstance
reactData: TableReactData<D>
internalData: TableInternalData<D>
getRefMaps(): TablePrivateRef
getComputeMaps(): TablePrivateComputed<D>
renderVN: RenderFunction
xegrid: VxeGridConstructor<D> | null
}
export interface TablePrivateRef {
refElem: Ref<HTMLDivElement>
refTooltip: Ref<VxeTooltipInstance>
refValidTooltip: Ref<VxeTooltipInstance>
refTableFilter: Ref<ComponentPublicInstance>
refTableMenu: Ref<VxeMenuPanelInstance>
refTableHeader: Ref<ComponentPublicInstance>
refTableBody: Ref<ComponentPublicInstance>
refTableFooter: Ref<ComponentPublicInstance>
refTableLeftHeader: Ref<ComponentPublicInstance>
refTableLeftBody: Ref<ComponentPublicInstance>
refTableLeftFooter: Ref<ComponentPublicInstance>
refTableRightHeader: Ref<ComponentPublicInstance>
refTableRightBody: Ref<ComponentPublicInstance>
refTableRightFooter: Ref<ComponentPublicInstance>
refLeftContainer: Ref<HTMLDivElement>
refRightContainer: Ref<HTMLDivElement>
refCellResizeBar: Ref<HTMLDivElement>
}
export interface VxeTablePrivateRef extends TablePrivateRef { }
export interface TablePrivateComputed<D = VxeTableDataRow> {
computeSize: ComputedRef<VxeTablePropTypes.Size>
computeValidOpts: ComputedRef<VxeTablePropTypes.ValidOpts<D>>
computeSXOpts: ComputedRef<VxeTablePropTypes.SXOpts>
computeSYOpts: ComputedRef<VxeTablePropTypes.SYOpts>
computeColumnOpts: ComputedRef<VxeTablePropTypes.ColumnOpts>
computeRowOpts: ComputedRef<VxeTablePropTypes.RowOpts>
computeResizeleOpts: ComputedRef<VxeTablePropTypes.ResizeOpts>
computeResizableOpts: ComputedRef<VxeTablePropTypes.ResizableOpts<D>>
computeSeqOpts: ComputedRef<VxeTablePropTypes.SeqOpts<D>>
computeRadioOpts: ComputedRef<VxeTablePropTypes.RadioOpts<D>>
computeCheckboxOpts: ComputedRef<VxeTablePropTypes.CheckboxOpts<D>>
computeTooltipOpts: ComputedRef<VxeTablePropTypes.TooltipOpts<D>>
computeEditOpts: ComputedRef<VxeTablePropTypes.EditOpts<D>>
computeSortOpts: ComputedRef<VxeTablePropTypes.SortConfig<D>>
computeFilterOpts: ComputedRef<VxeTablePropTypes.FilterOpts<D>>
computeMouseOpts: ComputedRef<VxeTablePropTypes.MouseOpts>
computeAreaOpts: ComputedRef<VxeTablePropTypes.AreaOpts>
computeKeyboardOpts: ComputedRef<VxeTablePropTypes.KeyboardOpts>
computeClipOpts: ComputedRef<VxeTablePropTypes.ClipOpts<D>>
computeFNROpts: ComputedRef<VxeTablePropTypes.FNROpts<D>>
computeHeaderMenu: ComputedRef<VxeTableDefines.MenuFirstOption>
computeBodyMenu: ComputedRef<VxeTableDefines.MenuFirstOption>
computeFooterMenu: ComputedRef<VxeTableDefines.MenuFirstOption>
computeIsMenu: ComputedRef<boolean>
computeMenuOpts: ComputedRef<VxeTablePropTypes.MenuOpts<D>>
computeExportOpts: ComputedRef<VxeTablePropTypes.ExportOpts>
computeImportOpts: ComputedRef<VxeTablePropTypes.ImportOpts>
computePrintOpts: ComputedRef<VxeTablePropTypes.PrintOpts>
computeExpandOpts: ComputedRef<VxeTablePropTypes.ExpandOpts<D>>
computeTreeOpts: ComputedRef<VxeTablePropTypes.TreeOpts<D>>
computeEmptyOpts: ComputedRef<VxeTablePropTypes.EmptyOpts>
computeLoadingOpts: ComputedRef<VxeTablePropTypes.LoadingOpts>
computeCustomOpts: ComputedRef<VxeTablePropTypes.CustomOpts<D>>
computeFixedColumnSize: ComputedRef<number>
computeIsMaxFixedColumn: ComputedRef<boolean>
computeIsAllCheckboxDisabled: ComputedRef<boolean>
}
export type VxeTablePrivateComputed<D = VxeTableDataRow> = TablePrivateComputed<D>
export interface TableMethods<D = VxeTableDataRow> extends TablePublicMethods<D> {
dispatchEvent(type: ValueOf<VxeTableEmits>, params: any, evnt: Event | null): void
}
export interface TablePublicMethods<DT = VxeTableDataRow> {
/**
* 手动清除表格所有条件,还原到初始状态
* 对于增删改查的场景中可能会用到,比如在数据保存之后清除表格缓存
*/
clearAll(): Promise<void>
/**
* 该方法已废弃!!!
* 同步 data 数据;如果用了该方法,那么组件将不再记录增删改的状态,只能自行实现对应逻辑
* 对于某些特殊的场景,比如深层树节点元素发生变动时可能会用到
* @deprecated
*/
syncData(): Promise<void>
/**
* 手动处理数据,用于手动排序与筛选
* 对于手动更改了排序、筛选...等条件后需要重新处理数据时可能会用到
*/
updateData(): Promise<void>
/**
* 加载数据
* @param data 数据
*/
loadData(data: any[]): Promise<any>
/**
* 加载数据并恢复到初始状态
* @param data 数据
*/
reloadData(data: any[]): Promise<void>
/**
* 局部加载行数据并恢复到初始状态
* @param rows 行对象
* @param record 新数据
* @param field 指定字段名
*/
reloadRow(rows: any | any[], record?: any, field?: string): Promise<void>
/**
* 用于树结构,给行数据加载子节点
* @param row 行对象
* @param children 子节点
*/
loadTreeChildren(row: any, children: any[]): Promise<any[]>
/**
* 加载列配置
* @param columns 列对象
*/
loadColumn(columns: (VxeTableDefines.ColumnOptions<any> | VxeTableDefines.ColumnInfo<any>)[]): Promise<any>
/**
* 加载列配置并恢复到初始状态
* @param columns 列对象
*/
reloadColumn(columns: (VxeTableDefines.ColumnOptions<any> | VxeTableDefines.ColumnInfo<any>)[]): Promise<any>
/**
* 根据 tr 元素获取对应的 row 信息
* @param tr 行节点元素
*/
getRowNode(trElem: HTMLElement): {
rowid: string
item: any
items: any[]
index: number
parent?: any
} | null
/**
* 根据 th/td 元素获取对应的 column 信息
* @param cell 单元格节点元素
*/
getColumnNode(cellElem: HTMLElement): {
colid: string
item: VxeTableDefines.ColumnInfo<DT>
items: VxeTableDefines.ColumnInfo<DT>[]
index: number
parent?: VxeTableDefines.ColumnInfo<DT>
} | null
/**
* 根据 row 获取行的序号
* @param row 行对象
*/
getRowSeq(row: any): string | number
/**
* 根据 row 获取相对于 data 中的索引
* @param row 行对象
*/
getRowIndex(row: any): number
/**
* 根据 row 获取相对于当前数据中的索引
* @param row 行对象
*/
getVTRowIndex(row: any): number
/**
* 根据 row 获取渲染中的虚拟索引
* @param row 行对象
*/
getVMRowIndex(row: any): number
/**
* 根据 column 获取相对于 columns 中的索引
* @param column 列对象
*/
getColumnIndex(column: VxeTableDefines.ColumnInfo<any>): number
/**
* 根据 column 获取相对于当前表格列中的索引
* @param column 列对象
*/
getVTColumnIndex(column: VxeTableDefines.ColumnInfo<any>): number
/**
* 根据 column 获取渲染中的虚拟索引
* @param column 列对象
*/
getVMColumnIndex(column: VxeTableDefines.ColumnInfo<any>): number
/**
* 创建 data 对象
* 对于某些特殊场景可能会用到,会自动对数据的字段名进行检测,如果不存在就自动定义
* @param records 数据
*/
createData(records: any[]): Promise<any[]>
/**
* 创建 Row|Rows 对象
* 对于某些特殊场景需要对数据进行手动插入时可能会用到
* @param records 数据
*/
createRow(records: any | any[]): Promise<any | any[]>
/**
* 只对 keep-source 开启有效,还原指定行 row 或者整个表格的数据
* @param rows 指定行
* @param field 字段名
*/
revertData(rows?: any | any[], field?: string): Promise<any>
/**
* 手动清空单元格内容,如果不传参数,则清空整个表格内容,如果传了行则清空指定行内容,如果传了指定字段,则清空该字段内容
* @param rows 指定行
* @param field 字段名
*/
clearData(rows?: any | any[], field?: string): Promise<any>
/**
* 用于 edit-config,判断行是否为新增的临时数据
* @param row 指定行
*/
isInsertByRow(row: any): boolean
/**
* 删除所有新增的临时数据
*/
removeInsertRow(): Promise<{ row: any, rows: any[] }>
/**
* 只对 keep-source 开启有效,判断行数据是否发生改变
* @param row 指定行
* @param field 指定字段
*/
isUpdateByRow(row: any, field?: string): boolean
/**
* 获取表格的可视列,也可以指定索引获取列
* @param columnIndex 列索引
*/
getColumns(): VxeTableDefines.ColumnInfo<DT>[]
getColumns(columnIndex?: number): VxeTableDefines.ColumnInfo<DT>
/**
* 根据列的唯一主键获取列
* @param colid 列主键
*/
getColumnById(colid: string): VxeTableDefines.ColumnInfo<DT> | null
/**
* 根据列的字段名获取列
* @param field 字段名
*/
getColumnByField(field: string): VxeTableDefines.ColumnInfo<DT> | null
/**
* 获取当前表格的列
* 收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列
*/
getTableColumn(): {
collectColumn: VxeTableDefines.ColumnInfo<DT>[]
fullColumn: VxeTableDefines.ColumnInfo<DT>[]
visibleColumn: VxeTableDefines.ColumnInfo<DT>[]
tableColumn: VxeTableDefines.ColumnInfo<DT>[]
}
/**
* 获取数据,和 data 的行为一致,也可以指定索引获取数据
*/
getData(): DT[]
getData(rowIndex: number): DT
/**
* 用于 type=checkbox,获取已选中的行数据
*/
getCheckboxRecords(isFull?: boolean): DT[]
/**
* 只对 tree-config 有效,获取行的父级
*/
getParentRow(rowOrRowid: any): DT | null
/**
* 根据行的唯一主键获取行
* @param rowid 行主键
*/
getRowById(rowid: string | number): DT | null
/**
* 根据行获取行的唯一主键
* @param row 行对象
*/
getRowid(row: any): string
/**
* 获取当前表格的数据
* 完整的全量表体数据、处理条件之后的全量表体数据、当前渲染中的表体数据、当前渲染中的表尾数据
*/
getTableData(): {
fullData: DT[]
visibleData: DT[]
tableData: DT[]
footerData: DT[][]
}
/**
* 设置指定列为固定列
* @param columnOrField 列对象或字段名
*/
setColumnFixed(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>, fixed: VxeColumnPropTypes.Fixed): Promise<void>
/**
* 取消指定的固定列
* @param columnOrField 列对象或字段名
*/
clearColumnFixed(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): Promise<void>
/**
* 隐藏指定列
* @param columnOrField 列对象或字段名
*/
hideColumn(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): Promise<void>
/**
* 显示指定列
* @param columnOrField 列对象或字段名
*/
showColumn(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): Promise<void>
/**
* 设置列宽
* @param fieldOrColumn 列对象或字段名
* @param width 宽度 %,px
*/
setColumnWidth(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>, width: number | string): Promise<void>
/**
* 获取列宽
* @param fieldOrColumn 列对象或字段名
*/
getColumnWidth(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): number;
/**
* 手动重置列的显示隐藏、列宽拖动的状态;如果为 true 则重置所有状态
* 如果已关联工具栏,则会同步更新
* @param options 可选参数
*/
resetColumn(options?: boolean | {
visible?: boolean
resizable?: boolean
fixed?: boolean
order?: boolean
}): Promise<void>
/**
* 刷新列配置
* 对于动态修改属性、显示/隐藏列等场景下可能会用到
*/
refreshColumn(): Promise<void>
/**
* 刷新滚动操作,手动同步滚动相关位置
* 对于某些特殊的操作,比如滚动条错位、固定列不同步
*/
refreshScroll(): Promise<void>
/**
* 重新计算表格,如果传 true 则进行完整计算
* 对于某些特殊场景可能会用到,比如隐藏的表格、重新计算列宽...等
*/
recalculate(refull?: boolean): Promise<void>
/**
* 打开 tooltip 提示
* @param target 目标元素
* @param content 内容
*/
openTooltip(target: HTMLElement, content: string | number): Promise<any>
/**
* 关闭 tooltip 提示
*/
closeTooltip(): Promise<any>
/**
* 用于 type=checkbox,设置行为选中状态,第二个参数为选中与否
* @param rows 指定行
* @param checked 是否选中
*/
setCheckboxRow(rows: any | any[], checked: boolean): Promise<any>
/**
* 用于 type=checkbox,判断列头复选框是否被选中
*/
isAllCheckboxChecked(): boolean
/**
* 用于 type=checkbox,判断列头复选框是否被半选
*/
isAllCheckboxIndeterminate(): boolean
/**
* 用于 type=checkbox,判断复选行数据是否勾选
* @param row 指定行
*/
isCheckedByCheckboxRow(row: any): boolean
/**
* 用于 type=checkbox,判断复选行数据是否半选
* @param row 指定行
*/
isIndeterminateByCheckboxRow(row: any): boolean
/**
* 用于 type=checkbox,切换某一行的选中状态
* @param row 指定行
*/
toggleCheckboxRow(row: any): Promise<any>
/**
* 用于 type=checkbox,设置所有行的选中状态
* @param checked 是否选中
*/
setAllCheckboxRow(checked: boolean): Promise<any>
/**
* 用于 radio-config.reserve,获取已保留选中的行数据
*/
getRadioReserveRecord(isFull?: boolean): any[]
/**
* 用于 radio-config.reserve,手动清空用户保留选中的行数据
*/
clearRadioReserve(): Promise<any>
/**
* 用于 checkbox-config.reserve,获取已保留选中的行数据
*/
getCheckboxReserveRecords(isFull?: boolean): any[]
/**
* 用于 type=checkbox,获取半选状态的行数据
*/
getCheckboxIndeterminateRecords(isFull?: boolean): any[]
/**
* 用于 checkbox-config.reserve,手动清空用户保留选中的行数据
*/
clearCheckboxReserve(): Promise<any>
/**
* 用于 type=checkbox,切换所有行的选中状态
*/
toggleAllCheckboxRow(): Promise<any>
/**
* 用于 type=checkbox,手动清空用户的选择
*/
clearCheckboxRow(): Promise<any>
/**
* 用于 row-config.isCurrent,设置某一行为高亮状态
* @param row 指定行
*/
setCurrentRow(row: any): Promise<any>
/**
* 用于 type=radio,判断单选行数据是否勾选
* @param row 指定行
*/
isCheckedByRadioRow(row: any): boolean
/**
* 用于 type=radio,设置某一行为选中状态
* @param row 指定行
*/
setRadioRow(row: any): Promise<any>
/**
* 将指定行设置为取消/标记待删除状态
*/
setPendingRow(rows: any | any[], status: boolean): Promise<any>
/**
* 切换指定行的取消/标记待删除状态
*/
togglePendingRow(rows: any | any[]): Promise<any>
/**
* 获取待删除状态的数据
*/
getPendingRecords(): DT[]
/**
* 判断行是否为待删除状态
* @param row 指定行
*/
hasPendingByRow(row: any): boolean
/**
* 清除所有标记状态
*/
clearPendingRow(): Promise<any>
/**
* 手动清除临时合并的单元格
*/
clearMergeCells(): Promise<any>
/**
* 手动清除临时合并的表尾
*/
clearMergeFooterItems(): Promise<any>
/**
* 用于 row-config.isCurrent,手动清空当前高亮的状态
*/
clearCurrentRow(): Promise<any>
/**
* 用于 type=radio,手动清空用户的选择
*/
clearRadioRow(): Promise<any>
/**
* 获取临时合并的单元格
*/
getMergeCells(): VxeTableDefines.MergeInfo[]
/**
* 获取临时合并的表尾
*/
getMergeFooterItems(): VxeTableDefines.MergeInfo[]
/**
* 用于 column-config.isCurrent,获取当前列
*/
getCurrentColumn(): VxeTableDefines.ColumnInfo<DT> | null
/**
* 用于 row-config.isCurrent,获取当前行的行数据
*/
getCurrentRecord(): DT | null
/**
* 用于 type=radio,获取当已选中的行数据
*/
getRadioRecord(isFull?: boolean): DT | null
/**
* 用于 column-config.isCurrent,设置某列行为高亮状态
* @param columnOrField 列对象或字段名
*/
setCurrentColumn(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): Promise<void>
/**
* 用于 column-config.isCurrent,手动清空当前高亮的状态
*/
clearCurrentColumn(): Promise<void>
/**
* 手动对表格进行排序
* @param sortConfs 字段名、多列排序
* @param order 排序方式
*/
sort(field: string, order?: VxeTablePropTypes.SortOrder): Promise<void>
sort(sortConfs: VxeTableDefines.SortConfs, order?: VxeTablePropTypes.SortOrder): Promise<void>
sort(sortConfs: VxeTableDefines.SortConfs[], order?: VxeTablePropTypes.SortOrder): Promise<void>
/**
* 手动清空排序条件,数据会恢复成未排序的状态
* @param columnOrField 列对象或字段名
*/
clearSort(fieldOrColumn?: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any> | null): Promise<void>
/**
* 判断指定列是否为排序状态,如果为空则判断所有列
* @param columnOrField 列对象或字段名
*/
isSort(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): boolean
/**
* 获取当前排序的列信息
*/
getSortColumns(): VxeTableDefines.SortCheckedParams[]
/**
* 手动关闭筛选面板
*/
closeFilter(): Promise<any>
/**
* 已废弃,请使用 isActiveFilterByColumn
* @deprecated
*/
isFilter(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): boolean
/**
* 判断指定列是否为筛选状态,如果为空则判断所有列
* @param columnOrField 列对象或字段名
*/
isActiveFilterByColumn(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): boolean
/**
* 用于 expand-config.lazy,用于懒加载展开行,判断展开行是否懒加载完成
* @param row 指定行
*/
isRowExpandLoaded(row: any): boolean
/**
* 用于 expand-config.lazy,手动清空懒加载展开行的状态,数据会恢复成未展开的状态,当再次展开时会重新加载
*/
clearRowExpandLoaded(row: any): Promise<void>
/**
* 重新懒加载展开行,并展开内容
* @param row 指定行
*/
reloadRowExpand(row: any): Promise<void>
/**
* @deprecated 已废弃,请使用 reloadRowExpand
*/
reloadExpandContent(row: any): Promise<void>
/**
* 用于 type=expand,切换展开行的状态
* @param row 指定行
*/
toggleRowExpand(row: any): Promise<void>
/**
* 用于 expand-config,设置所有行的展开与否
* 如果是关闭所有行,可以使用 clearRowExpand 快速清除
* @param checked 是否选中
*/
setAllRowExpand(checked: boolean): Promise<void>
/**
* 用于 expand-config,设置展开行,二个参数设置这一行展开与否
* @param rows 指定行
* @param checked 是否选中
*/
setRowExpand(rows: any | any[], checked: boolean): Promise<void>
/**
* 用于 expand-config,判断行是否为展开状态
* @param row 指定行
*/
isRowExpandByRow(row: any): boolean
/**
* @deprecated 已废弃,请使用 isRowExpandByRow
*/
isExpandByRow(row: any): boolean
/**
* 用于 type=expand,手动清空展开行状态,数据会恢复成未展开的状态
*/
clearRowExpand(): Promise<void>
/**
* 用于 type=expand,手动清空用户保留行的展开状态
*/
clearRowExpandReserve(): Promise<void>
/**
* 用于 expand-config,用于展开行,获取已展开的行数据
*/
getRowExpandRecords(): DT[]
/**
* 用于 tree-config,用于树表格,获取已展开的节点
* 注意,即使父节点被收起,只要该节点还处于展开状态都能获取到
*/
getTreeExpandRecords(): DT[]
/**
* 用于 tree-config.lazy,用于懒加载树表格,判断树节点是否懒加载完成
*/
isTreeExpandLoaded(row: any): boolean
/**
* 用于 tree-config.lazy,手动清空懒加载树节点的状态,数据会恢复成未展开的状态,当再次展开时会重新加载
*/
clearTreeExpandLoaded(row: any): Promise<any>
/**
* 重新懒加载树节点,并展开该节点
* @param rows 指定行
*/
reloadTreeExpand(row: any): Promise<any>
/**
* @deprecated 已废弃,请使用 reloadTreeExpand
*/
reloadTreeChilds(row: any): Promise<any>
/**
* 用于 tree-config,切换展开树形节点的状态
* @param row 指定行
*/
toggleTreeExpand(row: any): Promise<any>
/**
* 用于 tree-config,设置所有树节点的展开与否
* 如果是关闭所有树节点,可以使用 clearTreeExpand 快速清除
* @param checked 是否选中
*/
setAllTreeExpand(checked: boolean): Promise<void>
/**
* 用于 tree-config,设置展开树形节点,二个参数设置这一行展开与否
* @param rows 指定行
* @param checked 是否选中
*/
setTreeExpand(rows: any | any[], checked: boolean): Promise<void>
/**
* 用于 tree-config,判断行是否为树形节点展开状态
* @param row 指定行
*/
isTreeExpandByRow(row: any): boolean
/**
* 用于 tree-config,手动清空树形节点的展开状态,数据会恢复成未展开的状态
*/
clearTreeExpand(): Promise<void>
/**
* 用于 tree-config.reserve,手动清空用户保留树节点的展开状态
*/
clearTreeExpandReserve(): Promise<void>
/**
* 获取表格的滚动状态
*/
getScroll(): {
virtualX: boolean
virtualY: boolean
scrollTop: number
scrollLeft: number
}
/**
* 如果有滚动条,则滚动到对应的位置
* @param scrollLeft 左边距离
* @param scrollTop 顶部距离
*/
scrollTo(scrollLeft: number | null, scrollTop?: number | null): Promise<void>
/**
* 如果有滚动条,则滚动到对应的行
* @param row 指定行
* @param columnOrField 列对象或字段名
*/
scrollToRow(row: any, fieldOrColumn?: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): Promise<any>
/**
* 如果有滚动条,则滚动到对应的列
* @param columnOrField 列对象或字段名
*/
scrollToColumn(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any>): Promise<any>
/**
* 手动清除滚动相关信息,还原到初始状态
*/
clearScroll(): Promise<any>
/**
* 手动更新表尾
*/
updateFooter(): Promise<any>
/**
* 更新单元格状态
* @param params 插槽对象
*/
updateStatus(
params: {
row: DT
column: VxeTableDefines.ColumnInfo<DT>
},
cellValue?: any
): Promise<any>
/**
* 取消单元格的临时合并状态,如果为数组,则取消多个合并
*/
removeMergeCells(merges: VxeTableDefines.MergeOptions<any> | VxeTableDefines.MergeOptions<any>[]): Promise<VxeTableDefines.MergeInfo[]>
/**
* 取消表尾的临时合并状态,如果为数组,则取消多个合并
*/
removeMergeFooterItems(merges: VxeTableDefines.MergeOptions<any> | VxeTableDefines.MergeOptions<any>[]): Promise<VxeTableDefines.MergeInfo[]>
/**
* 临时合并单元格,如果为数组则合并多个
*/
setMergeCells(merges: VxeTableDefines.MergeOptions<any> | VxeTableDefines.MergeOptions<any>[]): Promise<any>
/**
* 临时合并表尾,如果为数组则合并多个
*/
setMergeFooterItems(merges: VxeTableDefines.MergeOptions<any> | VxeTableDefines.MergeOptions<any>[]): Promise<any>
/**
* 用于 mouse-config.area,更新已选区域的单元格样式
*/
updateCellAreas(): Promise<void>
/**
* 连接工具栏
* @param toolbar 工具栏组件实例
*/
connect(toolbar: VxeToolbarConstructor | VxeToolbarInstance): Promise<void>
/**
* 使表格获取焦点
*/
focus(): Promise<void>
/**
* 使表格失去焦点
*/
blur(): Promise<void>
}
export interface VxeTableMethods<D = VxeTableDataRow> extends TableMethods<D> { }
export interface TablePrivateMethods<D = VxeTableDataRow> {
getSetupOptions(): Required<VXETableConfigOptions>
updateAfterDataIndex(): void
callSlot<T>(slotFunc: ((params: T) => SlotVNodeType | SlotVNodeType[]) | string | null, params: T): SlotVNodeType[]
getParentElem(): Element | null
getParentHeight(): number
getExcludeHeight(): number
defineField(records: any[]): any[]
handleTableData(force?: boolean): Promise<any>
cacheRowMap(isSource?: boolean): void
cacheSourceMap(fullData: any[]): void
saveCustomResizable(isReset?: boolean): void
saveCustomVisible(): void
saveCustomFixed(): void
analyColumnWidth(): void
checkSelectionStatus(): void
handleSelectRow(params: any, value: any, isForce?: boolean): void
handleCustom(): Promise<void>
handleUpdateDataQueue(): void
handleRefreshColumnQueue(): void
preventEvent(evnt: any, type: any, args?: any, next?: any, end?: any): any
calcIndeterminateTem(treeData:VxeTableDataRow[]): void
triggerHeaderTitleEvent(evnt: MouseEvent, iconParams: VxeColumnPropTypes.TitlePrefix | VxeColumnPropTypes.TitleSuffix, params: VxeTableDefines.CellRenderHeaderParams<any>): void
triggerHeaderTooltipEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams<any>): void
triggerBodyTooltipEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderBodyParams<any>): void
triggerFooterTooltipEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderFooterParams<any>): void
handleTargetLeaveEvent(evnt: MouseEvent): void
triggerHeaderCellClickEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams<any>): void
triggerHeaderCellDblclickEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderHeaderParams<any>): void
triggerCellClickEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderBodyParams<any>): void
triggerCellDblclickEvent(evnt: MouseEvent, params: VxeTableDefines.CellRenderBodyParams<any>): void
handleToggleCheckRowEvent(evnt: Event | null, params: { row: any }): void
triggerCheckRowEvent(evnt: Event, params: { row: any }, value: boolean): void
triggerCheckAllEvent(evnt: MouseEvent | null, value: boolean): void
triggerRadioRowEvent(evnt: Event, params: { row: any }): void
triggerCurrentRowEvent(evnt: Event, params: {
$table: VxeTableConstructor<any> & VxeTablePrivateMethods<any>
row: any
rowIndex: number
$rowIndex: number
}): void
triggerRowExpandEvent(evnt: Event, params: VxeTableDefines.CellRenderBodyParams<any>): void
triggerTreeExpandEvent(evnt: Event, params: VxeTableDefines.CellRenderBodyParams<any>): void
triggerSortEvent(evnt: Event, column: VxeTableDefines.ColumnInfo<any>, order: VxeTablePropTypes.SortOrder): void
triggerScrollXEvent(evnt: Event): void
triggerScrollYEvent(evnt: Event): void
scrollToTreeRow(row: any): Promise<any>
updateScrollYStatus(fullData?: any[]): boolean
updateScrollXSpace(): void
updateScrollYSpace(): void
updateScrollXData(): void
updateScrollYData(): void
checkScrolling(): void
updateZindex(): void
handleCheckedCheckboxRow(rows: any, value: boolean, isForce?: boolean): Promise<any>
triggerHoverEvent(evnt: any, params: any): void
setHoverRow(row: any): void
clearHoverRow(): void
getCell(row: any, column: VxeTableDefines.ColumnInfo<any>): HTMLTableDataCellElement | null
getCellLabel(row: any, column: VxeTableDefines.ColumnInfo<any>): any
findRowIndexOf(list: any[], row: any): number
eqRow(row1: any, row2: any): boolean
}
export interface VxeTablePrivateMethods<D = VxeTableDataRow> extends TablePrivateMethods<D> { }
export interface TableReactData<D = VxeTableDataRow> {
// 低性能的静态列
staticColumns: any[]
// 渲染的列分组
tableGroupColumn: any[]
// 可视区渲染的列
tableColumn: any[]
// 渲染中的数据
tableData: D[]
// 是否启用了横向 X 可视渲染方式加载
scrollXLoad: boolean
// 是否启用了纵向 Y 可视渲染方式加载
scrollYLoad: boolean
// 是否存在纵向滚动条
overflowY: boolean
// 是否存在横向滚动条
overflowX: boolean
// 纵向滚动条的宽度
scrollbarWidth: number
// 横向滚动条的高度
scrollbarHeight: number
// 最后滚动时间戳
lastScrollTime: number
// 行高
rowHeight: number
// 表格父容器的高度
parentHeight: number
// 是否使用分组表头
isGroup: boolean
isAllOverflow: boolean
// 复选框属性,是否全选
isAllSelected: boolean
// 复选框属性,有选中且非全选状态
isIndeterminate: boolean
// 复选框属性,已选中的行集合
selectCheckboxMaps: Record<string, D>
// 当前行
currentRow: D | null
// 单选框属性,选中列
currentColumn: any
// 单选框属性,选中行
selectRadioRow: D | null
// 表尾合计数据
footerTableData: any[][]
// 展开列信息
expandColumn: any
hasFixedColumn: boolean
// 已展开的行
rowExpandedMaps: Record<string, D | null>
// 懒加载中的展开行
rowExpandLazyLoadedMaps: Record<string, D | null>
// 树节点列信息
treeNodeColumn: any
// 已展开树节点
treeExpandedMaps: Record<string, D | null>
// 懒加载中的树节点的集合
treeExpandLazyLoadedMaps: Record<string, D | null>
// 树节点不确定状态的集合
treeIndeterminateMaps: Record<string, D | null>
// 合并单元格的对象集
mergeList: VxeTableDefines.MergeItem<D>[]
// 合并表尾数据的对象集
mergeFooterList: VxeTableDefines.MergeItem<D>[]
// 刷新列标识,当列筛选被改变时,触发表格刷新数据
upDataFlag: number
// 刷新列标识,当列的特定属性被改变时,触发表格刷新列
reColumnFlag: number
// 已标记的对象集
pendingRowMaps: Record<string, D | null>
// 已标记的行
pendingRowList: any[],
// 初始化标识
initStore: {
filter: boolean
import: boolean
export: boolean
},
// 当前选中的筛选列
filterStore: {
isAllSelected: boolean
isIndeterminate: boolean
style: any
options: any[]
column: any
multiple: boolean
visible: boolean
maxHeight: number | null
[key: string]: any
},
// 存放列相关的信息
columnStore: {
leftList: VxeTableDefines.ColumnInfo<D>[]
centerList: VxeTableDefines.ColumnInfo<D>[]
rightList: VxeTableDefines.ColumnInfo<D>[]
resizeList: VxeTableDefines.ColumnInfo<D>[]
pxList: VxeTableDefines.ColumnInfo<D>[]
pxMinList: VxeTableDefines.ColumnInfo<D>[]
scaleList: VxeTableDefines.ColumnInfo<D>[]
scaleMinList: VxeTableDefines.ColumnInfo<D>[]
autoList: VxeTableDefines.ColumnInfo<D>[]
},
// 存放快捷菜单的信息
ctxMenuStore: {
selected: any
visible: boolean
showChild: boolean
selectChild: any
list: any[][]
style: any
[key: string]: any
},
// 存放可编辑相关信息
editStore: {
indexs: {
columns: any[]
},
titles: {
columns: any[]
},
// 选中源
selected: {
row: D | null
column: any
[key: string]: any
},
// 已复制源
copyed: {
cut: boolean
rows: D[]
columns: any[]
[key: string]: any
},
// 激活
actived: {
row: D | null
column: any
[key: string]: any
},
insertMaps: {
[key: string]: any
}
removeMaps: {
[key: string]: any
}
},
// 存放 tooltip 相关信息
tooltipStore: {
row: D | null
column: any
content: any
visible: boolean,
currOpts: any
}
// 存放数据校验相关信息
validStore: {
visible: boolean
},
validErrorMaps: {
[key: string]: {
row: D | null
column: any
rule: any
content: any
}
},
// 导入相关信息
importStore: {
inited: boolean
file: any
type: any
modeList: any[]
typeList: any[]
filename: any
visible: boolean
},
importParams: {
mode: any
types: any
message: boolean
},
// 导出相关信息
exportStore: {
inited: boolean
name: any
modeList: any[]
typeList: any[]
columns: any[]
isPrint: boolean
hasFooter: boolean
hasMerge: boolean
hasTree: boolean
hasColgroup: boolean
visible: boolean
},
exportParams: {
filename: any
sheetName: any
mode: any
type: any
isColgroup: boolean
isMerge: boolean
isAllExpand: boolean
useStyle: boolean
original: boolean
message: boolean
isHeader: boolean
isFooter: boolean
},
scrollVMLoading: boolean
_isResize: boolean
}
export interface TableInternalData<D = VxeTableDataRow> {
tZindex: number
elemStore: {
[key: string]: Ref<HTMLElement> | null
}
// 存放横向 X 虚拟滚动相关的信息
scrollXStore: {
offsetSize: number
visibleSize: number
startIndex: number
endIndex: number
}
// 存放纵向 Y 虚拟滚动相关信息
scrollYStore: {
adaptive?: boolean
rowHeight: number
offsetSize: number
visibleSize: number
startIndex: number
endIndex: number
}
// 表格宽度
tableWidth: number
// 表格高度
tableHeight: number
// 表头高度
headerHeight: number
// 表尾高度
footerHeight: number
customHeight: number
customMinHeight: number
customMaxHeight: number
// 当前 hover 行
hoverRow: any
// 最后滚动位置
lastScrollLeft: number
lastScrollTop: number
// 单选框属性,已选中保留的行
radioReserveRow: any
// 复选框属性,已选中保留的行
checkboxReserveRowMap: any
// 行数据,已展开保留的行集合
rowExpandedReserveRowMap: Record<string, D>
// 树结构数据,已展开保留的行集合
treeExpandedReserveRowMap: Record<string, D>
// 树结构数据,不确定状态的集合
treeIndeterminateRowMaps: Record<string, D>
// 列表完整数据、条件处理后
tableFullData: D[]
afterFullData: D[]
afterTreeFullData: D[]
// 列表条件处理后数据集合
afterFullRowMaps: Record<string, D>
tableSynchData: D[]
tableSourceData: D[]
// 树的全量数据、条件处理后
tableFullTreeData: D[]
// 收集的列配置(带分组)
collectColumn: VxeTableDefines.ColumnInfo<D>[],
// 完整所有列(不带分组)
tableFullColumn: VxeTableDefines.ColumnInfo<D>[]
// 渲染所有列
visibleColumn: VxeTableDefines.ColumnInfo<D>[]
// 缓存数据集
fullAllDataRowIdData: {
[key: string]: {
row: D
rowid: string
seq: string | number
index: number
$index: number
_index: number
items: any[]
parent: any
level: number
treeLoaded?: boolean
expandLoaded?: boolean
formatData?: {
[key: string]: {
value: any
label: any
}
}
}
}
sourceDataRowIdData: Record<string, D>
fullDataRowIdData: {
[key: string]: {
row: D
rowid: string
seq: string | number
index: number
$index: number
_index: number
items: any[]
parent: any
level: number
}
}
fullColumnIdData: {
[key: string]: {
column: VxeTableDefines.ColumnInfo<D>
colid: string
index: number
$index: number
_index: number
items: VxeTableDefines.ColumnInfo<D>[]
parent: VxeTableDefines.ColumnInfo<D>
}
}
fullColumnFieldData: {
[key: string]: {
column: VxeTableDefines.ColumnInfo<D>
colid: string
index: number
items: VxeTableDefines.ColumnInfo<D>[]
parent: VxeTableDefines.ColumnInfo<D>
}
}
// 特殊标识
inited: boolean
tooltipTimeout: any
initStatus: boolean
isActivated: boolean
// 内部属性
_lastResizeTime?: any
_keyCtx?: any
_lastCallTime?: any
_importResolve?: ((...args: any[]) => any) | null
_importReject?: ((...args: any[]) => any) | null
_currFilterParams?: any
_currMenuParams?: any
}
export namespace VxeTablePropTypes {
export type Size = SizeType
export type ID = string
export type Data<T = any> = T[]
export type Height = number | string
export type MinHeight = number | string
export type MaxHeight = number | string
export type Resizable = boolean
export type Stripe = boolean
export type Round = boolean
export type Border = boolean | 'default' | 'full' | 'outer' | 'inner' | 'none' | ''
export type Loading = boolean
export type Align = 'left' | 'center' | 'right' | '' | null
export type HeaderAlign = Align
export type FooterAlign = Align
export type ShowHeader = boolean
export type HighlightCurrentRow = boolean
export type HighlightHoverRow = boolean
export type HighlightCurrentColumn = boolean
export type HighlightHoverColumn = boolean
export type HighlightCell = boolean
export type ShowFooter = boolean
export type FooterMethod<D = VxeTableDataRow> = (params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$grid: VxeGridConstructor<D> | null | undefined
columns: VxeTableDefines.ColumnInfo<D>[]
data: D[]
}) => Array<string | number | null>[]
export type RowClassName<D = VxeTableDataRow> = string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
row: D
rowIndex: number
$rowIndex: number
_rowIndex: number
}) => void | null | string | { [key: string]: boolean })
export type CellClassName<D = VxeTableDataRow> = string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
row: D
rowIndex: number
$rowIndex: number
_rowIndex: number
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
_columnIndex: number
}) => void | null | string | { [key: string]: boolean })
export type HeaderRowClassName<D = VxeTableDataRow> = string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$rowIndex: number
fixed: VxeColumnPropTypes.Fixed
type: string
}) => void | null | string | { [key: string]: boolean })
export type HeaderCellClassName<D = VxeTableDataRow> = string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$rowIndex: number
column: VxeTableDefines.ColumnInfo<D>
fixed: VxeColumnPropTypes.Fixed
type: string
}) => void | null | string | { [key: string]: boolean })
export type FooterRowClassName<D = VxeTableDataRow> = string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$rowIndex: number
_rowIndex: number
fixed: VxeColumnPropTypes.Fixed
type: string
}) => void | null | string | { [key: string]: boolean })
export type FooterCellClassName<D = VxeTableDataRow> = string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$rowIndex: number
_rowIndex: number
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
_columnIndex: number
}) => void | null | string | { [key: string]: boolean })
export type CellStyle<D = VxeTableDataRow> = VNodeStyle | ((params: {
row: D
rowIndex: number
$rowIndex: number
_rowIndex: number
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
_columnIndex: number
}) => void | null | VNodeStyle)
export type HeaderCellStyle<D = VxeTableDataRow> = VNodeStyle | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$rowIndex: number
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
_columnIndex: number
}) => void | null | VNodeStyle)
export type FooterCellStyle<D = VxeTableDataRow> = VNodeStyle | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$rowIndex: number
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
_columnIndex: number
}) => void | null | VNodeStyle)
export type RowStyle<D = VxeTableDataRow> = VNodeStyle | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
row: D
rowIndex: number
$rowIndex: number
_rowIndex: number
}) => void | null | VNodeStyle)
export type HeaderRowStyle<D = VxeTableDataRow> = VNodeStyle | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$rowIndex: number
fixed: VxeColumnPropTypes.Fixed
type: string
}) => void | null | VNodeStyle)
export type FooterRowStyle<D = VxeTableDataRow> = VNodeStyle | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
$rowIndex: number
_rowIndex: number
fixed: VxeColumnPropTypes.Fixed
type: string
}) => void | null | VNodeStyle)
export type MergeCell<D = VxeTableDataRow> = VxeTableDefines.MergeOptions<D>
export type MergeCells<D = VxeTableDataRow> = MergeCell<D>[]
export type MergeFooterItem<D = VxeTableDataRow> = VxeTableDefines.MergeOptions<D>
export type MergeFooterItems<D = VxeTableDataRow> = MergeFooterItem<D>[]
export type SpanMethod<D = VxeTableDataRow> = (params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
row: D
rowIndex: number
$rowIndex: number
_rowIndex: number
isHidden: boolean
fixed: VxeColumnPropTypes.Fixed
type: string
visibleData: D[]
}) => void | { rowspan: number, colspan: number }
export type FooterSpanMethod<D = VxeTableDataRow> = (params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
_columnIndex: number
$columnIndex: number
$rowIndex: number
_rowIndex: number
items: any[]
data: D[][]
}) => void | { rowspan: number, colspan: number }
export type ShowOverflow = boolean | 'ellipsis' | 'title' | 'tooltip' | '' | null
export type ShowHeaderOverflow = ShowOverflow
export type ShowFooterOverflow = ShowOverflow
export type ColumnKey = boolean
export type RowKey = boolean
export type RowId = string
export type KeepSource = boolean
export type AutoResize = boolean
export type SyncResize = boolean | string | number
/**
* 响应式布局配置项
*/
export interface ResizeConfig {
refreshDelay?: number
}
export interface ResizeOpts extends ResizeConfig { }
/**
* 列配置信息
*/
export interface ColumnConfig {
/**
* 是否需要为每一列的 VNode 设置 key 属性
*/
useKey?: boolean
/**
* 当鼠标点击列头时,是否要高亮当前列
*/
isCurrent?: boolean
/**
* 当鼠标移到列头时,是否要高亮当前头
*/
isHover?: boolean
/**
* 每一列是否启用列宽调整
*/
resizable?: VxeColumnPropTypes.Resizable
/**
* 每一列的宽度
*/
width?: VxeColumnPropTypes.Width
/**
* 每一列的最小宽度
*/
minWidth?: VxeColumnPropTypes.MinWidth
/**
* 每一列的最大宽度
*/
maxWidth?: VxeColumnPropTypes.MaxWidth
/**
* 固定列允许设置的最大数量(如果是分组,则一个分组算一个)
*/
maxFixedSize?: number
/**
* 每一列的自定义表头单元格数据导出方法,返回自定义的标题
*/
headerExportMethod?: VxeColumnPropTypes.HeaderExportMethod<any>
/**
* 每一列的自定义单元格数据导出方法,返回自定义的值
*/
exportMethod?: VxeColumnPropTypes.ExportMethod<any>
/**
* 每一列的自定义表尾单元格数据导出方法,返回自定义的值
*/
footerExportMethod?: VxeColumnPropTypes.FooterExportMethod<any>
}
export interface ColumnOpts extends ColumnConfig { }
/**
* 行配置信息
*/
export interface RowConfig {
/**
* 是否需要为每一行的 VNode 设置 key 属性
*/
useKey?: boolean
/**
* 自定义行数据唯一主键的字段名(默认自动生成)
*/
keyField?: string
/**
* 当鼠标点击行时,是否要高亮当前行
*/
isCurrent?: boolean
/**
* 当鼠标移到行时,是否要高亮当前行
*/
isHover?: boolean
/**
* 每一行开启调整行高度
*/
resizable?: boolean
/**
* 只对 show-overflow 有效,每一行的高度
*/
height?: number
}
export interface RowOpts extends RowConfig { }
/**
* 自定义列配置项
*/
export interface CustomConfig<D = VxeTableDataRow> {
/**
* 是否启用 localStorage 本地保存,会将列操作状态保留在本地(需要有 id)
*/
storage?: boolean | {
visible?: boolean
resizable?: boolean
fixed?: boolean
order?: boolean
}
/**
* 自定义列是否允许列选中的方法,该方法的返回值用来决定这一列的 checkbox 是否可以选中
*/
checkMethod?(params: {
column: VxeTableDefines.ColumnInfo<D>
}): boolean
}
export interface CustomOpts<D = VxeTableDataRow> extends CustomConfig<D> { }
/**
* 列调整配置项
*/
export interface ResizableConfig<D = VxeTableDataRow> {
/**
* 列宽拖动的最小宽度
*/
minWidth?: number | string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
$rowIndex: number
cell: HTMLElement
}) => number | string)
/**
* 列宽拖动的最大宽度
*/
maxWidth?: number | string | ((params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
$rowIndex: number
cell: HTMLElement
}) => number | string)
}
export interface ResizableOpts<D = VxeTableDataRow> extends ResizableConfig<D> { }
/**
* 序号配置项
*/
export interface SeqConfig<D = VxeTableDataRow> {
startIndex?: number
seqMethod?(params: {
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
row: D
rowIndex: number
$rowIndex: number
}): number | string
}
export interface SeqOpts<D = VxeTableDataRow> extends SeqConfig<D> { }
interface SortConfigDefaultSort {
field: string
order: SortOrder
}
/**
* 排序配置项
*/
export interface SortConfig<D = VxeTableDataRow> {
defaultSort?: SortConfigDefaultSort | SortConfigDefaultSort[]
orders?: SortOrder[]
sortMethod?(params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
data: D[]
sortList: VxeTableDefines.SortCheckedParams[]
}): any[]
remote?: boolean
multiple?: boolean
chronological?: boolean
trigger?: 'default' | 'cell'
showIcon?: boolean
iconLayout?: 'horizontal' | 'vertical'
iconAsc?: string
iconDesc?: string
}
export type SortOrder = 'asc' | 'desc' | '' | null
export interface SortOpts<D = VxeTableDataRow> extends SortConfig<D> {
orders: SortOrder[]
}
/**
* 筛选配置项
*/
export interface FilterConfig<D = VxeTableDataRow> {
filterMethod?:(params: {
options: VxeTableDefines.FilterOption[]
values: any[]
cellValue: any
row: D
column: VxeTableDefines.ColumnInfo<D>
}) => any
remote?: boolean
showIcon?: boolean
iconNone?: string
iconMatch?: string
confirmButtonText?: string
resetButtonText?: string
}
export interface FilterOpts<D = VxeTableDataRow> extends FilterConfig<D> { }
/**
* 单选框配置
*/
export interface RadioConfig<D = VxeTableDataRow> {
reserve?: boolean
labelField?: string
checkRowKey?: string | number
checkMethod?(params: {
row: D
}): boolean
visibleMethod?(params: {
row: D
}): boolean
trigger?: 'default' | 'cell' | 'row' | '' | null
highlight?: boolean
strict?: boolean
}
export interface RadioOpts<D = VxeTableDataRow> extends RadioConfig<D> { }
/**
* 复选框配置项
*/
export interface CheckboxConfig<D = VxeTableDataRow> {
reserve?: boolean
labelField?: string
checkField?: string
indeterminateField?: string
showHeader?: boolean
checkAll?: boolean
checkRowKeys?: string[] | number[]
checkStrictly?: boolean
strict?: boolean
isShiftKey?: boolean
checkMethod?(params: {
row: D
}): boolean
visibleMethod?(params: {
row: D
}): boolean
trigger?: 'default' | 'cell' | 'row' | '' | null
highlight?: boolean
range?: boolean
/**
* 请使用 indeterminateField
* @deprecated
*/
halfField?: string
}
export interface CheckboxOpts<D = VxeTableDataRow> extends CheckboxConfig<D> { }
/**
* 提示信息配置项
*/
export interface TooltipConfig<D = VxeTableDataRow> {
showAll?: boolean
theme?: 'dark' | 'light' | '' | null
enterable?: boolean
enterDelay?: number
leaveDelay?: number
contentMethod?(params: {
items: any[]
row: D
rowIndex: number
$rowIndex: number
_rowIndex: number
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
_columnIndex: number
type: 'header' | 'body' | 'footer' | '' | null
cell: HTMLElement
$event: any
}): string | null | void
}
export interface TooltipOpts<D = VxeTableDataRow> extends TooltipConfig<D> { }
/**
* 展开行配置项
*/
export interface ExpandConfig<D = VxeTableDataRow> {
labelField?: string
expandAll?: boolean
expandRowKeys?: string[] | number[]
accordion?: boolean
trigger?: 'default' | 'cell' | 'row' | '' | null
lazy?: boolean
reserve?: boolean
height?: number
loadMethod?(params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
row: D
rowIndex: number
$rowIndex: number
}): Promise<void>
toggleMethod?(params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
expanded: boolean
row: D
rowIndex: number
$rowIndex: number
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
}): boolean
visibleMethod?(params: VxeTableDefines.CellRenderBodyParams<D>): boolean
showIcon?: boolean
iconOpen?: string
iconClose?: string
iconLoaded?: string
}
export interface ExpandOpts<D = VxeTableDataRow> extends ExpandConfig<D> { }
/**
* 树形结构配置项
*/
export interface TreeConfig<D = VxeTableDataRow> {
/**
* 自动将列表转为树结构
*/
transform?: boolean
/**
* 用于 tree-config.transform,树节点的字段名
*/
rowField?: string
/**
* 用于 tree-config.transform,树父节点的字段名
*/
parentField?: string
/**
* 树子节点的字段名
*/
childrenField?: string
/**
* 用于 tree-config.transform,树子节点映射的字段名
*/
mapChildrenField?: string
/**
* 树节点的缩进
*/
indent?: number
/**
* 树节点的连接线(启用连接线会降低渲染性能)
*/
showLine?: boolean
/**
* 默认展开所有子孙树节点(只会在初始化时被触发一次)
*/
expandAll?: boolean
/**
* 默认展开指定树节点(只会在初始化时被触发一次,需要有 row-config.keyField)
*/
expandRowKeys?: string[] | number[]
/**
* 对于同一级的节点,每次只能展开一个
*/
accordion?: boolean
/**
* 触发方式(注:当多种功能重叠时,会同时触发)
*/
trigger?: 'default' | 'cell' | 'row' | '' | null
/**
* 是否使用懒加载(启用后只有指定 hasChildField 字段的节点才允许被点击)
*/
lazy?: boolean
/**
* 只对 lazy 启用后有效,标识是否存在子节点,从而控制是否允许被点击
*/
hasChildField?: string
/**
* 是否保留展开状态,对于某些场景可能会用到,比如数据被刷新之后还保留之前展开的状态(需要有 row-config.keyField)
*/
reserve?: boolean
/**
* 该方法用于异步加载子节点
*/
loadMethod?(params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
row: D
}): Promise<any[]>
/**
* 该方法在展开或关闭触发之前调用,可以通过返回值来决定是否允许继续执行
*/
toggleMethod?(params: {
$table: VxeTableConstructor<D> & VxeTablePrivateMethods<D>
expanded: boolean
row: D
column: VxeTableDefines.ColumnInfo<D>
columnIndex: number
$columnIndex: number
}): boolean
/**
* 是否显示图标按钮
*/
showIcon?: boolean
/**
* 自定义展开后显示的图标
*/
iconOpen?: string
/**
* 自定义收起后显示的图标
*/
iconClose?: string
/**
* 自定义懒加载中显示的图标
*/
iconLoaded?: string
/**
* 已废弃,请使用 showLine
* @deprecated
*/
line?: boolean
/**
* 已废弃,请使用 hasChildField
* @deprecated
*/
hasChild?: string
/**
* 已废弃,请使用 childrenField
* @deprecated
*/
children?: string
}
export type TreeOpts<D = VxeTableDataRow> = Required<TreeConfig<D>>
/**
* 快捷菜单配置项
*/
export interface MenuConfig<D = VxeTableDataRow> {
/**
* 是否启用
*/
enabled?: boolean
/**
* 表头的右键菜单
*/
header?: VxeTableDefines.MenuOptions
/**
* 内容的右键菜单
*/
body?: VxeTableDefines.MenuOptions
/**
* 表尾的右键菜单
*/
footer?: VxeTableDefines.MenuOptions
/**
* 触发方式
* default(默认右键表格触发), cell(右键单元格触发)
*/
trigger?: 'default' | 'cell' | '' | null
/**
* 菜单面板的 className
*/
className?: string
/**
* 该函数的返回值用来决定是否允许显示右键菜单(对于需要对菜单进行权限控制时可能会用到)
*/
visibleMethod?(params: {
type: string
options: VxeTableDefines.MenuFirstOption[][]
columns: VxeTableDefines.ColumnInfo<D>[]
row?: D
rowIndex?: number
column?: VxeTableDefines.ColumnInfo<D>
columnIndex?: number