ecc304c7d396e969d424774ca500e46a99f5d4c4f57113bf164e3ee2b891aac99b1fea46d1115dc29d60888794cb8ac36f36e67bc9b0f5cfdabf311356e71b 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. import type { CSSProperties, ComponentInternalInstance, PropType, Ref, VNode } from 'vue';
  2. import type { ComponentSize } from 'element-plus/es/constants';
  3. import type { Nullable } from 'element-plus/es/utils';
  4. import type { Store } from '../store';
  5. import type { TableColumnCtx } from '../table-column/defaults';
  6. import type TableLayout from '../table-layout';
  7. import type { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from '../util';
  8. type DefaultRow = Record<PropertyKey, any>;
  9. interface TableRefs {
  10. tableWrapper: HTMLElement;
  11. headerWrapper: HTMLElement;
  12. footerWrapper: HTMLElement;
  13. fixedBodyWrapper: HTMLElement;
  14. rightFixedBodyWrapper: HTMLElement;
  15. bodyWrapper: HTMLElement;
  16. appendWrapper: HTMLElement;
  17. [key: string]: any;
  18. }
  19. interface TableState {
  20. isGroup: Ref<boolean>;
  21. resizeState: Ref<{
  22. width: any;
  23. height: any;
  24. }>;
  25. doLayout: () => void;
  26. debouncedUpdateLayout: () => void;
  27. }
  28. interface TreeProps {
  29. hasChildren?: string;
  30. children?: string;
  31. checkStrictly?: boolean;
  32. }
  33. type HoverState<T extends DefaultRow> = Nullable<{
  34. cell: HTMLElement;
  35. column: TableColumnCtx<T>;
  36. row: T;
  37. }>;
  38. type RIS<T extends DefaultRow> = {
  39. row: T;
  40. $index: number;
  41. store: Store<T>;
  42. expanded: boolean;
  43. };
  44. type RenderExpanded<T extends DefaultRow> = ({ row, $index, store, expanded, }: RIS<T>) => VNode[] | undefined;
  45. type SummaryMethod<T extends DefaultRow> = (data: {
  46. columns: TableColumnCtx<T>[];
  47. data: T[];
  48. }) => (string | VNode)[];
  49. interface Table<T extends DefaultRow = any> extends ComponentInternalInstance {
  50. $ready: boolean;
  51. hoverState?: HoverState<T> | null;
  52. renderExpanded: RenderExpanded<T>;
  53. store: Store<T>;
  54. layout: TableLayout<T>;
  55. refs: TableRefs;
  56. tableId: string;
  57. state: TableState;
  58. }
  59. type ColumnCls<T> = string | ((data: {
  60. row: T;
  61. rowIndex: number;
  62. }) => string);
  63. type ColumnStyle<T> = CSSProperties | ((data: {
  64. row: T;
  65. rowIndex: number;
  66. }) => CSSProperties);
  67. type CellCls<T extends DefaultRow> = string | ((data: {
  68. row: T;
  69. rowIndex: number;
  70. column: TableColumnCtx<T>;
  71. columnIndex: number;
  72. }) => string);
  73. type CellStyle<T extends DefaultRow> = CSSProperties | ((data: {
  74. row: T;
  75. rowIndex: number;
  76. column: TableColumnCtx<T>;
  77. columnIndex: number;
  78. }) => CSSProperties);
  79. type Layout = 'fixed' | 'auto';
  80. interface TableProps<T extends DefaultRow> {
  81. data: T[];
  82. size?: ComponentSize;
  83. width?: string | number;
  84. height?: string | number;
  85. maxHeight?: string | number;
  86. fit?: boolean;
  87. stripe?: boolean;
  88. border?: boolean;
  89. rowKey?: string | ((row: T) => string);
  90. context?: Table<T>;
  91. showHeader?: boolean;
  92. showSummary?: boolean;
  93. sumText?: string;
  94. summaryMethod?: SummaryMethod<T>;
  95. rowClassName?: ColumnCls<T>;
  96. rowStyle?: ColumnStyle<T>;
  97. cellClassName?: CellCls<T>;
  98. cellStyle?: CellStyle<T>;
  99. headerRowClassName?: ColumnCls<T>;
  100. headerRowStyle?: ColumnStyle<T>;
  101. headerCellClassName?: CellCls<T>;
  102. headerCellStyle?: CellStyle<T>;
  103. highlightCurrentRow?: boolean;
  104. currentRowKey?: string | number;
  105. emptyText?: string;
  106. expandRowKeys?: Array<string>;
  107. defaultExpandAll?: boolean;
  108. defaultSort?: Sort;
  109. tooltipEffect?: string;
  110. tooltipOptions?: TableOverflowTooltipOptions;
  111. spanMethod?: (data: {
  112. row: T;
  113. rowIndex: number;
  114. column: TableColumnCtx<T>;
  115. columnIndex: number;
  116. }) => number[] | {
  117. rowspan: number;
  118. colspan: number;
  119. } | undefined;
  120. selectOnIndeterminate?: boolean;
  121. indent?: number;
  122. treeProps?: TreeProps;
  123. lazy?: boolean;
  124. load?: (row: T, treeNode: TreeNode, resolve: (data: T[]) => void) => void;
  125. className?: string;
  126. style?: CSSProperties;
  127. tableLayout?: Layout;
  128. scrollbarAlwaysOn?: boolean;
  129. flexible?: boolean;
  130. showOverflowTooltip?: boolean | TableOverflowTooltipOptions;
  131. tooltipFormatter?: TableOverflowTooltipFormatter<T>;
  132. appendFilterPanelTo?: string;
  133. scrollbarTabindex?: number | string;
  134. nativeScrollbar?: boolean;
  135. }
  136. type TableTooltipData<T extends DefaultRow> = Parameters<TableOverflowTooltipFormatter<T>>[0];
  137. type TableSortOrder = 'ascending' | 'descending';
  138. interface Sort {
  139. prop: string;
  140. order: TableSortOrder;
  141. init?: any;
  142. silent?: any;
  143. }
  144. interface Filter<T extends DefaultRow> {
  145. column: TableColumnCtx<T>;
  146. values: string[];
  147. silent: any;
  148. }
  149. interface TreeNode {
  150. expanded?: boolean;
  151. loading?: boolean;
  152. noLazyChildren?: boolean;
  153. indent?: number;
  154. level?: number;
  155. display?: boolean;
  156. }
  157. interface RenderRowData<T extends DefaultRow> {
  158. store: Store<T>;
  159. _self: Table<T>;
  160. column: TableColumnCtx<T>;
  161. row: T;
  162. $index: number;
  163. cellIndex: number;
  164. treeNode?: TreeNode;
  165. expanded: boolean;
  166. }
  167. declare const _default: {
  168. /**
  169. * @description table data
  170. */
  171. data: {
  172. type: PropType<any[]>;
  173. default: () => never[];
  174. };
  175. /**
  176. * @description size of Table
  177. */
  178. size: {
  179. readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "small" | "default" | "large", never>>;
  180. readonly required: false;
  181. readonly validator: ((val: unknown) => boolean) | undefined;
  182. __epPropKey: true;
  183. };
  184. width: (NumberConstructor | StringConstructor)[];
  185. /**
  186. * @description table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external styles
  187. */
  188. height: (NumberConstructor | StringConstructor)[];
  189. /**
  190. * @description table's max-height. The legal value is a number or the height in px
  191. */
  192. maxHeight: (NumberConstructor | StringConstructor)[];
  193. /**
  194. * @description whether width of column automatically fits its container
  195. */
  196. fit: {
  197. type: BooleanConstructor;
  198. default: boolean;
  199. };
  200. /**
  201. * @description whether Table is striped
  202. */
  203. stripe: BooleanConstructor;
  204. /**
  205. * @description whether Table has vertical border
  206. */
  207. border: BooleanConstructor;
  208. /**
  209. * @description key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used
  210. */
  211. rowKey: PropType<TableProps<any>["rowKey"]>;
  212. /**
  213. * @description whether Table header is visible
  214. */
  215. showHeader: {
  216. type: BooleanConstructor;
  217. default: boolean;
  218. };
  219. /**
  220. * @description whether to display a summary row
  221. */
  222. showSummary: BooleanConstructor;
  223. /**
  224. * @description displayed text for the first column of summary row
  225. */
  226. sumText: StringConstructor;
  227. /**
  228. * @description custom summary method
  229. */
  230. summaryMethod: PropType<TableProps<any>["summaryMethod"]>;
  231. /**
  232. * @description function that returns custom class names for a row, or a string assigning class names for every row
  233. */
  234. rowClassName: PropType<TableProps<any>["rowClassName"]>;
  235. /**
  236. * @description function that returns custom style for a row, or an object assigning custom style for every row
  237. */
  238. rowStyle: PropType<TableProps<any>["rowStyle"]>;
  239. /**
  240. * @description function that returns custom class names for a cell, or a string assigning class names for every cell
  241. */
  242. cellClassName: PropType<TableProps<any>["cellClassName"]>;
  243. /**
  244. * @description function that returns custom style for a cell, or an object assigning custom style for every cell
  245. */
  246. cellStyle: PropType<TableProps<any>["cellStyle"]>;
  247. /**
  248. * @description function that returns custom class names for a row in table header, or a string assigning class names for every row in table header
  249. */
  250. headerRowClassName: PropType<TableProps<any>["headerRowClassName"]>;
  251. /**
  252. * @description function that returns custom style for a row in table header, or an object assigning custom style for every row in table header
  253. */
  254. headerRowStyle: PropType<TableProps<any>["headerRowStyle"]>;
  255. /**
  256. * @description function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header
  257. */
  258. headerCellClassName: PropType<TableProps<any>["headerCellClassName"]>;
  259. /**
  260. * @description function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header
  261. */
  262. headerCellStyle: PropType<TableProps<any>["headerCellStyle"]>;
  263. /**
  264. * @description whether current row is highlighted
  265. */
  266. highlightCurrentRow: BooleanConstructor;
  267. /**
  268. * @description key of current row, a set only prop
  269. */
  270. currentRowKey: (NumberConstructor | StringConstructor)[];
  271. /**
  272. * @description displayed text when data is empty. You can customize this area with `#empty`
  273. */
  274. emptyText: StringConstructor;
  275. /**
  276. * @description set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop
  277. */
  278. expandRowKeys: PropType<TableProps<any>["expandRowKeys"]>;
  279. /**
  280. * @description whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data
  281. */
  282. defaultExpandAll: BooleanConstructor;
  283. /**
  284. * @description set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order
  285. */
  286. defaultSort: PropType<TableProps<any>["defaultSort"]>;
  287. /**
  288. * @description the `effect` of the overflow tooltip
  289. */
  290. tooltipEffect: StringConstructor;
  291. /**
  292. * @description the options for the overflow tooltip, [see the following tooltip component](tooltip.html#attributes)
  293. */
  294. tooltipOptions: PropType<TableProps<any>["tooltipOptions"]>;
  295. /**
  296. * @description method that returns rowspan and colspan
  297. */
  298. spanMethod: PropType<TableProps<any>["spanMethod"]>;
  299. /**
  300. * @description controls the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected
  301. */
  302. selectOnIndeterminate: {
  303. type: BooleanConstructor;
  304. default: boolean;
  305. };
  306. /**
  307. * @description horizontal indentation of tree data
  308. */
  309. indent: {
  310. type: NumberConstructor;
  311. default: number;
  312. };
  313. /**
  314. * @description configuration for rendering nested data
  315. */
  316. treeProps: {
  317. type: PropType<TableProps<any>["treeProps"]>;
  318. default: () => {
  319. hasChildren: string;
  320. children: string;
  321. checkStrictly: boolean;
  322. };
  323. };
  324. /**
  325. * @description whether to lazy loading data
  326. */
  327. lazy: BooleanConstructor;
  328. /**
  329. * @description method for loading child row data, only works when `lazy` is true
  330. */
  331. load: PropType<TableProps<any>["load"]>;
  332. style: {
  333. type: PropType<CSSProperties>;
  334. default: () => {};
  335. };
  336. className: {
  337. type: StringConstructor;
  338. default: string;
  339. };
  340. /**
  341. * @description sets the algorithm used to lay out table cells, rows, and columns
  342. */
  343. tableLayout: {
  344. type: PropType<Layout>;
  345. default: string;
  346. };
  347. /**
  348. * @description always show scrollbar
  349. */
  350. scrollbarAlwaysOn: BooleanConstructor;
  351. /**
  352. * @description ensure main axis minimum-size doesn't follow the content
  353. */
  354. flexible: BooleanConstructor;
  355. /**
  356. * @description whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns
  357. */
  358. showOverflowTooltip: PropType<TableProps<any>["showOverflowTooltip"]>;
  359. /**
  360. * @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
  361. */
  362. tooltipFormatter: PropType<TableProps<any>["tooltipFormatter"]>;
  363. appendFilterPanelTo: StringConstructor;
  364. scrollbarTabindex: {
  365. type: (NumberConstructor | StringConstructor)[];
  366. default: undefined;
  367. };
  368. /**
  369. * @description whether to allow drag the last column
  370. */
  371. allowDragLastColumn: {
  372. type: BooleanConstructor;
  373. default: boolean;
  374. };
  375. /**
  376. * @description whether to preserve expanded row content in DOM when collapsed
  377. */
  378. preserveExpandedContent: BooleanConstructor;
  379. /**
  380. * @description whether to use native scrollbars
  381. */
  382. nativeScrollbar: BooleanConstructor;
  383. };
  384. export default _default;
  385. export type { SummaryMethod, Table, TableProps, TableRefs, ColumnCls, ColumnStyle, CellCls, CellStyle, DefaultRow, TreeNode, RenderRowData, Sort, Filter, TableColumnCtx, TreeProps, TableTooltipData, TableSortOrder, RenderExpanded, };