d417a95736e4184f573e59567626d17f9684036c6134cb676ded77c87b4dd9a1f601ac26a55fe119a5499253278e744a5e7347d5f866de9629f2f18a5e2342 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. import type { ComponentInternalInstance, PropType, Ref, VNode } from 'vue';
  2. import type { DefaultRow, Table, TableSortOrder } from '../table/defaults';
  3. import type { TableOverflowTooltipFormatter, TableOverflowTooltipOptions } from '../util';
  4. import type { Store } from '../store';
  5. type CI<T extends DefaultRow> = {
  6. column: TableColumnCtx<T>;
  7. $index: number;
  8. store: Store<T>;
  9. _self: any;
  10. };
  11. type Filters = {
  12. text: string;
  13. value: string;
  14. }[];
  15. type FilterMethods<T extends DefaultRow> = (value: string, row: T, column: TableColumnCtx<T>) => void;
  16. type ValueOf<T> = T[keyof T];
  17. type TableColumnCtx<T extends DefaultRow = DefaultRow> = {
  18. id: string;
  19. realWidth: number | null;
  20. type: string;
  21. label: string;
  22. className: string;
  23. labelClassName: string;
  24. property: string;
  25. prop: string;
  26. width?: string | number;
  27. minWidth: string | number;
  28. renderHeader: (data: CI<T>) => VNode;
  29. sortable: boolean | string;
  30. sortMethod: (a: T, b: T) => number;
  31. sortBy: string | ((row: T, index: number, array?: T[]) => string) | string[];
  32. resizable: boolean;
  33. columnKey: string;
  34. rawColumnKey: string;
  35. align: string;
  36. headerAlign: string;
  37. showOverflowTooltip?: boolean | TableOverflowTooltipOptions;
  38. tooltipFormatter?: TableOverflowTooltipFormatter<T>;
  39. fixed: boolean | string;
  40. formatter: (row: T, column: TableColumnCtx<T>, cellValue: any, index: number) => VNode | string;
  41. selectable: (row: T, index: number) => boolean;
  42. reserveSelection: boolean;
  43. filterMethod: FilterMethods<T>;
  44. filteredValue: string[];
  45. filters: Filters;
  46. filterPlacement: string;
  47. filterMultiple: boolean;
  48. filterClassName: string;
  49. index: number | ((index: number) => number);
  50. sortOrders: (TableSortOrder | null)[];
  51. renderCell: (data: any) => VNode | VNode[];
  52. colSpan: number;
  53. rowSpan: number;
  54. children?: TableColumnCtx<T>[];
  55. level: number;
  56. filterable: boolean | FilterMethods<T> | Filters;
  57. order: TableSortOrder | null;
  58. isColumnGroup: boolean;
  59. isSubColumn: boolean;
  60. columns: TableColumnCtx<T>[];
  61. getColumnIndex: () => number;
  62. no: number;
  63. filterOpened?: boolean;
  64. renderFilterIcon?: (scope: any) => VNode;
  65. renderExpand?: (scope: any) => VNode;
  66. };
  67. interface TableColumn<T extends DefaultRow> extends ComponentInternalInstance {
  68. vnode: {
  69. vParent: TableColumn<T> | Table<T>;
  70. } & VNode;
  71. vParent: TableColumn<T> | Table<T>;
  72. columnId: string;
  73. columnConfig: Ref<Partial<TableColumnCtx<T>>>;
  74. }
  75. export type { Filters, FilterMethods, TableColumnCtx, TableColumn, ValueOf };
  76. declare const _default: {
  77. /**
  78. * @description type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon
  79. */
  80. type: {
  81. type: StringConstructor;
  82. default: string;
  83. };
  84. /**
  85. * @description column label
  86. */
  87. label: StringConstructor;
  88. /**
  89. * @description class name of cells in the column
  90. */
  91. className: StringConstructor;
  92. /**
  93. * @description class name of the label of this column
  94. */
  95. labelClassName: StringConstructor;
  96. /**
  97. * @description
  98. */
  99. property: StringConstructor;
  100. /**
  101. * @description field name. You can also use its alias: `property`
  102. */
  103. prop: StringConstructor;
  104. /**
  105. * @description column width
  106. */
  107. width: {
  108. type: (NumberConstructor | StringConstructor)[];
  109. default: string;
  110. };
  111. /**
  112. * @description column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion
  113. */
  114. minWidth: {
  115. type: (NumberConstructor | StringConstructor)[];
  116. default: string;
  117. };
  118. /**
  119. * @description render function for table header of this column
  120. */
  121. renderHeader: PropType<TableColumnCtx<any>["renderHeader"]>;
  122. /**
  123. * @description whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table
  124. */
  125. sortable: {
  126. type: (BooleanConstructor | StringConstructor)[];
  127. default: boolean;
  128. };
  129. /**
  130. * @description sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort
  131. */
  132. sortMethod: PropType<TableColumnCtx<any>["sortMethod"]>;
  133. /**
  134. * @description specify which property to sort by, works when `sortable` is `true` and `sort-method` is `undefined`. If set to an Array, the column will sequentially sort by the next property if the previous one is equal
  135. */
  136. sortBy: PropType<TableColumnCtx<any>["sortBy"]>;
  137. /**
  138. * @description whether column width can be resized, works when `border` of `el-table` is `true`
  139. */
  140. resizable: {
  141. type: BooleanConstructor;
  142. default: boolean;
  143. };
  144. /**
  145. * @description column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered
  146. */
  147. columnKey: StringConstructor;
  148. /**
  149. * @description alignment, the value should be 'left' \/ 'center' \/ 'right'
  150. */
  151. align: StringConstructor;
  152. /**
  153. * @description alignment of the table header. If omitted, the value of the above `align` attribute will be applied, the value should be 'left' \/ 'center' \/ 'right'
  154. */
  155. headerAlign: StringConstructor;
  156. /**
  157. * @description whether to hide extra content and show them in a tooltip when hovering on the cell
  158. */
  159. showOverflowTooltip: {
  160. type: PropType<TableColumnCtx<any>["showOverflowTooltip"]>;
  161. default: undefined;
  162. };
  163. /**
  164. * @description function that formats cell tooltip content, works when `show-overflow-tooltip` is `true`
  165. */
  166. tooltipFormatter: PropType<TableColumnCtx<any>["tooltipFormatter"]>;
  167. /**
  168. * @description whether column is fixed at left / right. Will be fixed at left if `true`
  169. */
  170. fixed: (BooleanConstructor | StringConstructor)[];
  171. /**
  172. * @description function that formats cell content
  173. */
  174. formatter: PropType<TableColumnCtx<any>["formatter"]>;
  175. /**
  176. * @description function that determines if a certain row can be selected, works when `type` is 'selection'
  177. */
  178. selectable: PropType<TableColumnCtx<any>["selectable"]>;
  179. /**
  180. * @description whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work
  181. */
  182. reserveSelection: BooleanConstructor;
  183. /**
  184. * @description data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true`
  185. */
  186. filterMethod: PropType<TableColumnCtx<any>["filterMethod"]>;
  187. /**
  188. * @description filter value for selected data, might be useful when table header is rendered with `render-header`
  189. */
  190. filteredValue: PropType<TableColumnCtx<any>["filteredValue"]>;
  191. /**
  192. * @description an array of data filtering options. For each element in this array, `text` and `value` are required
  193. */
  194. filters: PropType<TableColumnCtx<any>["filters"]>;
  195. /**
  196. * @description placement for the filter dropdown
  197. */
  198. filterPlacement: StringConstructor;
  199. /**
  200. * @description whether data filtering supports multiple options
  201. */
  202. filterMultiple: {
  203. type: BooleanConstructor;
  204. default: boolean;
  205. };
  206. /**
  207. * @description className for the filter dropdown
  208. */
  209. filterClassName: StringConstructor;
  210. /**
  211. * @description customize indices for each row, works on columns with `type=index`
  212. */
  213. index: PropType<TableColumnCtx<any>["index"]>;
  214. /**
  215. * @description the order of the sorting strategies used when sorting the data, works when `sortable` is `true`. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the array
  216. */
  217. sortOrders: {
  218. type: PropType<TableColumnCtx<any>["sortOrders"]>;
  219. default: () => (string | null)[];
  220. validator: (val: TableColumnCtx<any>["sortOrders"]) => boolean;
  221. };
  222. };
  223. export default _default;