stk-table-vue 0.0.1-beta.8 → 0.0.1-beta.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +2 -1
  2. package/lib/src/StkTable/StkTable.vue.d.ts +137 -59
  3. package/lib/src/StkTable/types/index.d.ts +0 -67
  4. package/lib/stk-table-vue.js +1 -1
  5. package/lib/style.css +207 -200
  6. package/package.json +3 -2
  7. package/src/StkTable/StkTable.vue +102 -30
  8. package/src/StkTable/index.ts +1 -1
  9. package/src/StkTable/{style.css → style.less} +33 -9
  10. package/src/StkTable/types/index.ts +0 -92
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  Vue3 简易虚拟滚动表格。用于实时数据展示，新数据行高亮渐暗动效。
4
4
  js体积(未压缩41kb)
5
5
 
6
- ## 功能
6
+ ## Feature TODO:
7
7
  * [x] 高亮行，单元格。
8
8
  * [x] 横向虚拟滚动。
9
9
  * [x] 列固定。
@@ -13,6 +13,7 @@ js体积(未压缩41kb)
13
13
  * [x] 支持table-layout: fixed 配置。
14
14
  * [x] 鼠标悬浮在表格上，键盘上下左右滚动虚拟表格
15
15
  * [] 列固定阴影
16
+ * [] 不传row-key 时，自动按序号生成id
16
17
 
17
18
  ## Usage
18
19
  > npm install stk-table-vue
package/lib/src/StkTable/StkTable.vue.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { SortOption, StkTableColumn } from './types/index';
1
+ import { SortOption, StkTableColumn, UniqKey } from './types/index';
2
2
  /**
3
3
  * 选中一行，
4
4
  * @param {string} rowKey
@@ -30,34 +30,73 @@ declare function resetSorter(): void;
30
30
  declare function scrollTo(top?: number | null, left?: number | null): void;
31
31
  /** 获取当前状态的表格数据 */
32
32
  declare function getTableData(): any[];
33
- declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<{
34
- width: string;
35
- minWidth: string;
36
- maxWidth: string;
37
- fixedMode: boolean;
38
- headless: boolean;
39
- theme: "light" | "dark";
40
- virtual: boolean;
41
- virtualX: boolean;
42
- columns: StkTableColumn<any>[];
43
- dataSource: any[];
44
- rowKey: import("./types/index").UniqKey;
45
- /** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合 */
46
- colKey: import("./types/index").UniqKey;
47
- emptyCellText: string;
48
- noDataFull: boolean;
49
- showNoData: boolean;
50
- sortRemote: boolean;
51
- showHeaderOverflow: boolean;
52
- showOverflow: boolean;
53
- showTrHoverClass: boolean;
54
- headerDrag: boolean;
55
- rowClassName: (row: any, i: number) => string;
56
- colResizable: boolean;
57
- colMinWidth: number;
58
- bordered: boolean | "h" | "v" | "body-v";
59
- autoResize: boolean;
60
- }>>, {
33
+ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
34
+ width?: string | undefined;
35
+ /** 最小表格宽度 */
36
+ minWidth?: string | undefined;
37
+ /** 表格最大宽度*/
38
+ maxWidth?: string | undefined;
39
+ /** 是否使用 table-layout:fixed */
40
+ fixedMode?: boolean | undefined;
41
+ /** 是否隐藏表头 */
42
+ headless?: boolean | undefined;
43
+ /** 主题，亮、暗 */
44
+ theme?: "light" | "dark" | undefined;
45
+ /** 虚拟滚动 */
46
+ virtual?: boolean | undefined;
47
+ /** x轴虚拟滚动 */
48
+ virtualX?: boolean | undefined;
49
+ /** 表格列配置 */
50
+ columns?: StkTableColumn<any>[] | undefined;
51
+ /** 表格数据源 */
52
+ dataSource?: any[] | undefined;
53
+ /** 行唯一键 */
54
+ rowKey?: UniqKey | undefined;
55
+ /** 列唯一键 */
56
+ colKey?: UniqKey | undefined;
57
+ /** 空值展示文字 */
58
+ emptyCellText?: string | undefined;
59
+ /** 暂无数据兜底高度是否撑满 */
60
+ noDataFull?: boolean | undefined;
61
+ /** 是否展示暂无数据 */
62
+ showNoData?: boolean | undefined;
63
+ /** 是否服务端排序，true则不排序数据 */
64
+ sortRemote?: boolean | undefined;
65
+ /** 表头是否溢出展示... */
66
+ showHeaderOverflow?: boolean | undefined;
67
+ /** 表体溢出是否展示... */
68
+ showOverflow?: boolean | undefined;
69
+ /** 是否增加行hover class */
70
+ showTrHoverClass?: boolean | undefined;
71
+ /** 表头是否可拖动 */
72
+ headerDrag?: boolean | undefined;
73
+ /**
74
+ * 给行附加className<br>
75
+ * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
76
+ */
77
+ rowClassName?: ((row: any, i: number) => string) | undefined;
78
+ /**
79
+ * 列宽是否可拖动<br>
80
+ * **不要设置**列minWidth，**必须**设置width<br>
81
+ * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
82
+ */
83
+ colResizable?: boolean | undefined;
84
+ /** 可拖动至最小的列宽 */
85
+ colMinWidth?: number | undefined;
86
+ /**
87
+ * 单元格分割线。
88
+ * 默认横竖都有
89
+ * "h" - 仅展示横线
90
+ * "v" - 仅展示竖线
91
+ * "body-v" - 仅表体展示竖线
92
+ */
93
+ bordered?: boolean | "h" | "v" | "body-v" | undefined;
94
+ /**
95
+ * 自动重新计算虚拟滚动高度宽度。默认true
96
+ * [非响应式]
97
+ */
98
+ autoResize?: boolean | undefined;
99
+ }>, {
61
100
  width: string;
62
101
  fixedMode: boolean;
63
102
  minWidth: string;
@@ -109,34 +148,73 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
109
148
  "row-menu": (...args: any[]) => void;
110
149
  "cell-click": (...args: any[]) => void;
111
150
  "header-cell-click": (...args: any[]) => void;
112
- }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Partial<{
113
- width: string;
114
- minWidth: string;
115
- maxWidth: string;
116
- fixedMode: boolean;
117
- headless: boolean;
118
- theme: "light" | "dark";
119
- virtual: boolean;
120
- virtualX: boolean;
121
- columns: StkTableColumn<any>[];
122
- dataSource: any[];
123
- rowKey: import("./types/index").UniqKey;
124
- /** 若有多级表头时，最后一行的tableHeaders.内容是 props.columns 的引用集合 */
125
- colKey: import("./types/index").UniqKey;
126
- emptyCellText: string;
127
- noDataFull: boolean;
128
- showNoData: boolean;
129
- sortRemote: boolean;
130
- showHeaderOverflow: boolean;
131
- showOverflow: boolean;
132
- showTrHoverClass: boolean;
133
- headerDrag: boolean;
134
- rowClassName: (row: any, i: number) => string;
135
- colResizable: boolean;
136
- colMinWidth: number;
137
- bordered: boolean | "h" | "v" | "body-v";
138
- autoResize: boolean;
139
- }>>, {
151
+ }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
152
+ width?: string | undefined;
153
+ /** 最小表格宽度 */
154
+ minWidth?: string | undefined;
155
+ /** 表格最大宽度*/
156
+ maxWidth?: string | undefined;
157
+ /** 是否使用 table-layout:fixed */
158
+ fixedMode?: boolean | undefined;
159
+ /** 是否隐藏表头 */
160
+ headless?: boolean | undefined;
161
+ /** 主题，亮、暗 */
162
+ theme?: "light" | "dark" | undefined;
163
+ /** 虚拟滚动 */
164
+ virtual?: boolean | undefined;
165
+ /** x轴虚拟滚动 */
166
+ virtualX?: boolean | undefined;
167
+ /** 表格列配置 */
168
+ columns?: StkTableColumn<any>[] | undefined;
169
+ /** 表格数据源 */
170
+ dataSource?: any[] | undefined;
171
+ /** 行唯一键 */
172
+ rowKey?: UniqKey | undefined;
173
+ /** 列唯一键 */
174
+ colKey?: UniqKey | undefined;
175
+ /** 空值展示文字 */
176
+ emptyCellText?: string | undefined;
177
+ /** 暂无数据兜底高度是否撑满 */
178
+ noDataFull?: boolean | undefined;
179
+ /** 是否展示暂无数据 */
180
+ showNoData?: boolean | undefined;
181
+ /** 是否服务端排序，true则不排序数据 */
182
+ sortRemote?: boolean | undefined;
183
+ /** 表头是否溢出展示... */
184
+ showHeaderOverflow?: boolean | undefined;
185
+ /** 表体溢出是否展示... */
186
+ showOverflow?: boolean | undefined;
187
+ /** 是否增加行hover class */
188
+ showTrHoverClass?: boolean | undefined;
189
+ /** 表头是否可拖动 */
190
+ headerDrag?: boolean | undefined;
191
+ /**
192
+ * 给行附加className<br>
193
+ * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
194
+ */
195
+ rowClassName?: ((row: any, i: number) => string) | undefined;
196
+ /**
197
+ * 列宽是否可拖动<br>
198
+ * **不要设置**列minWidth，**必须**设置width<br>
199
+ * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
200
+ */
201
+ colResizable?: boolean | undefined;
202
+ /** 可拖动至最小的列宽 */
203
+ colMinWidth?: number | undefined;
204
+ /**
205
+ * 单元格分割线。
206
+ * 默认横竖都有
207
+ * "h" - 仅展示横线
208
+ * "v" - 仅展示竖线
209
+ * "body-v" - 仅表体展示竖线
210
+ */
211
+ bordered?: boolean | "h" | "v" | "body-v" | undefined;
212
+ /**
213
+ * 自动重新计算虚拟滚动高度宽度。默认true
214
+ * [非响应式]
215
+ */
216
+ autoResize?: boolean | undefined;
217
+ }>, {
140
218
  width: string;
141
219
  fixedMode: boolean;
142
220
  minWidth: string;
@@ -180,7 +258,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
180
258
  width: string;
181
259
  minWidth: string;
182
260
  maxWidth: string;
183
- colKey: import("./types/index").UniqKey;
261
+ colKey: UniqKey;
184
262
  fixedMode: boolean;
185
263
  headless: boolean;
186
264
  theme: "light" | "dark";
@@ -188,7 +266,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
188
266
  virtualX: boolean;
189
267
  columns: StkTableColumn<any>[];
190
268
  dataSource: any[];
191
- rowKey: import("./types/index").UniqKey;
269
+ rowKey: UniqKey;
192
270
  emptyCellText: string;
193
271
  noDataFull: boolean;
194
272
  showNoData: boolean;
package/lib/src/StkTable/types/index.d.ts CHANGED
@@ -57,71 +57,4 @@ export type SortState<T> = {
57
57
  sortType?: 'number' | 'string';
58
58
  };
59
59
  export type UniqKey = string | ((param: any) => string);
60
- export type StkProps = Partial<{
61
- width: string;
62
- /** 最小表格宽度 */
63
- minWidth: string;
64
- /** 表格最大宽度*/
65
- maxWidth: string;
66
- /** 是否使用 table-layout:fixed */
67
- fixedMode: boolean;
68
- /** 是否隐藏表头 */
69
- headless: boolean;
70
- /** 主题，亮、暗 */
71
- theme: 'light' | 'dark';
72
- /** 虚拟滚动 */
73
- virtual: boolean;
74
- /** x轴虚拟滚动 */
75
- virtualX: boolean;
76
- /** 表格列配置 */
77
- columns: StkTableColumn<any>[];
78
- /** 表格数据源 */
79
- dataSource: any[];
80
- /** 行唯一键 */
81
- rowKey: UniqKey;
82
- /** 列唯一键 */
83
- colKey: UniqKey;
84
- /** 空值展示文字 */
85
- emptyCellText: string;
86
- /** 暂无数据兜底高度是否撑满 */
87
- noDataFull: boolean;
88
- /** 是否展示暂无数据 */
89
- showNoData: boolean;
90
- /** 是否服务端排序，true则不排序数据 */
91
- sortRemote: boolean;
92
- /** 表头是否溢出展示... */
93
- showHeaderOverflow: boolean;
94
- /** 表体溢出是否展示... */
95
- showOverflow: boolean;
96
- /** 是否增加行hover class */
97
- showTrHoverClass: boolean;
98
- /** 表头是否可拖动 */
99
- headerDrag: boolean;
100
- /**
101
- * 给行附加className<br>
102
- * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
103
- */
104
- rowClassName: (row: any, i: number) => string;
105
- /**
106
- * 列宽是否可拖动<br>
107
- * **不要设置**列minWidth，**必须**设置width<br>
108
- * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
109
- */
110
- colResizable: boolean;
111
- /** 可拖动至最小的列宽 */
112
- colMinWidth: number;
113
- /**
114
- * 单元格分割线。
115
- * 默认横竖都有
116
- * "h" - 仅展示横线
117
- * "v" - 仅展示竖线
118
- * "body-v" - 仅表体展示竖线
119
- */
120
- bordered: boolean | 'h' | 'v' | 'body-v';
121
- /**
122
- * 自动重新计算虚拟滚动高度宽度。默认true
123
- * [非响应式]
124
- */
125
- autoResize: boolean;
126
- }>;
127
60
  export {};
package/lib/stk-table-vue.js CHANGED
@@ -977,7 +977,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
977
977
  }
978
978
  emit("scroll", e);
979
979
  }
980
- function onTrMouseOver(e, row) {
980
+ function onTrMouseOver(_e, row) {
981
981
  if (props.showTrHoverClass) {
982
982
  currentHover.value = rowKeyGen(row);
983
983
  }
package/lib/style.css CHANGED
@@ -1,257 +1,264 @@
1
1
  @keyframes stkTableDim{
2
- from{
3
- background-color:var(--highlight-color);
4
- }
2
+ from{
3
+ background-color:var(--highlight-color);
4
+ }
5
5
  }
6
6
  .stk-table{
7
- --row-height:28px;
8
- --cell-padding-x:8px;
9
- --resize-handle-width:4px;
10
- --border-color:#e8eaec;
11
- --border-width:1px;
12
- --td-bgc:#fff;
13
- --th-bgc:#f8f8f9;
14
- --tr-active-bgc:rgb(230, 247, 255);
15
- --tr-hover-bgc:rgba(230, 247, 255, 0.7);
16
- --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
17
- --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
18
- --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
19
- --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
20
- --highlight-color:#71a2fd;
21
-
22
- --sort-arrow-color:#5d5f69;
23
- --sort-arrow-hover-color:#8f90b5;
24
- --sort-arrow-active-color:#1b63d9;
25
- --sort-arrow-active-sub-color:#cbcbe1;
26
- --col-resize-indicator-color:#cbcbe1;
27
-
28
- position:relative;
29
- overflow:auto;
30
- display:flex;
31
- flex-direction:column;
7
+ --row-height:28px;
8
+ --cell-padding-x:8px;
9
+ --resize-handle-width:4px;
10
+ --border-color:#e8eaec;
11
+ --border-width:1px;
12
+ --td-bgc:#fff;
13
+ --th-bgc:#f8f8f9;
14
+ --tr-active-bgc:#e6f7ff;
15
+ --tr-hover-bgc:rgba(230, 247, 255, 0.7);
16
+ --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
17
+ --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
18
+ --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
19
+ --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
20
+ --highlight-color:#71a2fd;
21
+ --sort-arrow-color:#5d5f69;
22
+ --sort-arrow-hover-color:#8f90b5;
23
+ --sort-arrow-active-color:#1b63d9;
24
+ --sort-arrow-active-sub-color:#cbcbe1;
25
+ --col-resize-indicator-color:#cbcbe1;
26
+ position:relative;
27
+ overflow:auto;
28
+ display:flex;
29
+ flex-direction:column;
32
30
  }
33
31
  .stk-table.dark{
34
- --th-bgc:#181c21;
35
- --td-bgc:#181c21;
36
- --border-color:#26292e;
37
- --tr-active-bgc:#283f63;
38
- --tr-hover-bgc:#1a2b46;
39
- --table-bgc:#181c21;
40
- --highlight-color:#1e4c99;
41
-
42
- --sort-arrow-color:#5d6064;
43
- --sort-arrow-hover-color:#727782;
44
- --sort-arrow-active-color:#d0d1d2;
45
- --sort-arrow-active-sub-color:#5d6064;
46
-
47
- --col-resize-indicator-color:#5d6064;
48
- color:#d0d1d2;
49
- }
32
+ --th-bgc:#181c21;
33
+ --td-bgc:#181c21;
34
+ --border-color:#26292e;
35
+ --tr-active-bgc:#283f63;
36
+ --tr-hover-bgc:#1a2b46;
37
+ --table-bgc:#181c21;
38
+ --highlight-color:#1e4c99;
39
+ --sort-arrow-color:#5d6064;
40
+ --sort-arrow-hover-color:#727782;
41
+ --sort-arrow-active-color:#d0d1d2;
42
+ --sort-arrow-active-sub-color:#5d6064;
43
+ --col-resize-indicator-color:#5d6064;
44
+ color:#d0d1d2;
45
+ }
50
46
  .stk-table.headless{
51
- border-top:1px solid var(--border-color);
52
- }
47
+ border-top:1px solid var(--border-color);
48
+ }
53
49
  .stk-table.col-resizable .stk-table-main{
54
- width:-moz-fit-content !important;
55
- width:fit-content !important;
56
- min-width:-moz-min-content !important;
57
- min-width:min-content !important;
58
- }
50
+ width:-moz-fit-content !important;
51
+ width:fit-content !important;
52
+ min-width:-moz-min-content !important;
53
+ min-width:min-content !important;
54
+ }
59
55
  .stk-table.is-col-resizing th{
60
- pointer-events:none;
61
- }
56
+ pointer-events:none;
57
+ }
62
58
  .stk-table.border-h{
63
- --bg-border-right:linear-gradient(transparent, transparent);
64
- --bg-border-left:linear-gradient(transparent, transparent);
65
- }
59
+ --bg-border-right:linear-gradient(transparent, transparent);
60
+ --bg-border-left:linear-gradient(transparent, transparent);
61
+ }
66
62
  .stk-table.border-v{
67
- --bg-border-bottom:linear-gradient(transparent, transparent);
68
- }
63
+ --bg-border-bottom:linear-gradient(transparent, transparent);
64
+ }
69
65
  .stk-table.border .stk-table-main th,
70
- .stk-table.border .stk-table-main td{
71
- background-image:var(--bg-border-right), var(--bg-border-bottom);
72
- }
66
+ .stk-table.border .stk-table-main td{
67
+ background-image:var(--bg-border-right), var(--bg-border-bottom);
68
+ }
73
69
  .stk-table.border .stk-table-main thead tr:first-child th{
74
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
75
- }
70
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
71
+ }
76
72
  .stk-table.border .stk-table-main thead tr:first-child th:first-child{
77
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
78
- }
73
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
74
+ }
79
75
  .stk-table.border .stk-table-main thead tr th:first-child{
80
- background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
81
- }
76
+ background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
77
+ }
82
78
  .stk-table.border .stk-table-main tbody td:first-child{
83
- background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
84
- }
79
+ background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
80
+ }
85
81
  .stk-table.border.virtual-x .stk-table-main thead tr:first-child .virtual-x-left + th{
86
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
87
- }
82
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
83
+ }
88
84
  .stk-table.border.virtual-x .stk-table-main tr .virtual-x-left + th{
89
- background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
90
- }
85
+ background-image:var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
86
+ }
91
87
  .stk-table.border-body-v .stk-table-main tbody{
92
- --bg-border-bottom:linear-gradient(transparent, transparent);
93
- }
88
+ --bg-border-bottom:linear-gradient(transparent, transparent);
89
+ }
94
90
  .stk-table .column-resize-indicator{
95
- width:0;
96
- height:100%;
97
- border-left:1px dashed var(--col-resize-indicator-color);
98
- position:absolute;
99
- z-index:10;
100
- display:none;
101
- pointer-events:none;
102
- }
91
+ width:0;
92
+ height:100%;
93
+ border-left:1px dashed var(--col-resize-indicator-color);
94
+ position:absolute;
95
+ z-index:10;
96
+ display:none;
97
+ pointer-events:none;
98
+ }
103
99
  .stk-table .stk-table-main{
104
- border-spacing:0;
105
- border-collapse:separate;
106
- }
100
+ border-spacing:0;
101
+ border-collapse:separate;
102
+ width:-moz-fit-content;
103
+ width:fit-content;
104
+ min-width:100%;
105
+ }
107
106
  .stk-table .stk-table-main.fixed-mode{
108
- table-layout:fixed;
109
- }
107
+ table-layout:fixed;
108
+ min-width:-moz-min-content;
109
+ min-width:min-content;
110
+ }
110
111
  .stk-table .stk-table-main th,
111
- .stk-table .stk-table-main td{
112
- z-index:1;
113
- height:var(--row-height);
114
- font-size:14px;
115
- box-sizing:border-box;
116
- padding:0 var(--cell-padding-x);
117
- }
112
+ .stk-table .stk-table-main td{
113
+ z-index:1;
114
+ height:var(--row-height);
115
+ font-size:14px;
116
+ box-sizing:border-box;
117
+ padding:0 var(--cell-padding-x);
118
+ }
118
119
  .stk-table .stk-table-main thead tr:first-child th{
119
- position:sticky;
120
- top:0;
121
- }
120
+ position:sticky;
121
+ top:0;
122
+ }
122
123
  .stk-table .stk-table-main thead tr th{
123
- background-color:var(--th-bgc);
124
- }
124
+ background-color:var(--th-bgc);
125
+ }
125
126
  .stk-table .stk-table-main thead tr th.sortable{
126
- cursor:pointer;
127
- }
127
+ cursor:pointer;
128
+ }
128
129
  .stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper{
129
- white-space:nowrap;
130
- overflow:hidden;
131
- }
130
+ white-space:nowrap;
131
+ overflow:hidden;
132
+ }
132
133
  .stk-table .stk-table-main thead tr th.text-overflow .table-header-cell-wrapper .table-header-title{
133
- text-overflow:ellipsis;
134
- overflow:hidden;
135
- }
134
+ text-overflow:ellipsis;
135
+ overflow:hidden;
136
+ }
136
137
  .stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-up{
137
- fill:var(--sort-arrow-hover-color);
138
- }
138
+ fill:var(--sort-arrow-hover-color);
139
+ }
139
140
  .stk-table .stk-table-main thead tr th:not(.sorter-desc):not(.sorter-asc):hover .table-header-cell-wrapper .table-header-sorter #arrow-down{
140
- fill:var(--sort-arrow-hover-color);
141
- }
141
+ fill:var(--sort-arrow-hover-color);
142
+ }
142
143
  .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter{
143
- display:inline;
144
- display:initial;
145
- }
144
+ display:inline;
145
+ display:initial;
146
+ }
146
147
  .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-up{
147
- fill:var(--sort-arrow-active-sub-color);
148
- }
148
+ fill:var(--sort-arrow-active-sub-color);
149
+ }
149
150
  .stk-table .stk-table-main thead tr th.sorter-desc .table-header-cell-wrapper .table-header-sorter #arrow-down{
150
- fill:var(--sort-arrow-active-color);
151
- }
151
+ fill:var(--sort-arrow-active-color);
152
+ }
152
153
  .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter{
153
- display:inline;
154
- display:initial;
155
- }
154
+ display:inline;
155
+ display:initial;
156
+ }
156
157
  .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-up{
157
- fill:var(--sort-arrow-active-color);
158
- }
158
+ fill:var(--sort-arrow-active-color);
159
+ }
159
160
  .stk-table .stk-table-main thead tr th.sorter-asc .table-header-cell-wrapper .table-header-sorter #arrow-down{
160
- fill:var(--sort-arrow-active-sub-color);
161
- }
161
+ fill:var(--sort-arrow-active-sub-color);
162
+ }
162
163
  .stk-table .stk-table-main thead tr th .table-header-cell-wrapper{
163
- max-width:100%;
164
- display:inline-flex;
165
- align-items:center;
166
- }
164
+ max-width:100%;
165
+ display:inline-flex;
166
+ align-items:center;
167
+ }
167
168
  .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-title{
168
- overflow:hidden;
169
- align-self:flex-start;
170
- }
169
+ overflow:hidden;
170
+ align-self:flex-start;
171
+ }
171
172
  .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter{
172
- flex-shrink:0;
173
- margin-left:4px;
174
- width:16px;
175
- height:16px;
176
- display:none;
177
- }
173
+ flex-shrink:0;
174
+ margin-left:4px;
175
+ width:16px;
176
+ height:16px;
177
+ display:none;
178
+ }
178
179
  .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-up,
179
- .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down{
180
- fill:var(--sort-arrow-color);
181
- }
180
+ .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-sorter #arrow-down{
181
+ fill:var(--sort-arrow-color);
182
+ }
182
183
  .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer{
183
- position:absolute;
184
- top:0;
185
- bottom:0;
186
- cursor:col-resize;
187
- width:var(--resize-handle-width);
188
- }
184
+ position:absolute;
185
+ top:0;
186
+ bottom:0;
187
+ cursor:col-resize;
188
+ width:var(--resize-handle-width);
189
+ }
189
190
  .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.left{
190
- left:0;
191
- }
191
+ left:0;
192
+ }
192
193
  .stk-table .stk-table-main thead tr th .table-header-cell-wrapper .table-header-resizer.right{
193
- right:0;
194
- }
194
+ right:0;
195
+ }
196
+ .stk-table .stk-table-main tbody{
197
+ }
195
198
  .stk-table .stk-table-main tbody tr{
196
- background-color:var(--td-bgc);
197
- }
199
+ background-color:var(--td-bgc);
200
+ }
198
201
  .stk-table .stk-table-main tbody tr.highlight-row{
199
- animation:stkTableDim 2s linear;
200
- }
202
+ animation:stkTableDim 2s linear;
203
+ }
201
204
  .stk-table .stk-table-main tbody tr.hover,
202
- .stk-table .stk-table-main tbody tr:hover{
203
- background-color:var(--tr-hover-bgc);
204
- }
205
+ .stk-table .stk-table-main tbody tr:hover{
206
+ background-color:var(--tr-hover-bgc);
207
+ }
205
208
  .stk-table .stk-table-main tbody tr.active{
206
- background-color:var(--tr-active-bgc);
207
- }
209
+ background-color:var(--tr-active-bgc);
210
+ }
211
+ .stk-table .stk-table-main tbody tr td{
212
+ }
208
213
  .stk-table .stk-table-main tbody tr td.fixed-cell{
209
- background-color:inherit;
210
- }
214
+ background-color:inherit;
215
+ }
211
216
  .stk-table .stk-table-main tbody tr td.highlight-cell{
212
- animation:stkTableDim 2s linear;
213
- }
217
+ animation:stkTableDim 2s linear;
218
+ }
214
219
  .stk-table .stk-table-main tbody tr td.text-overflow .table-cell-wrapper{
215
- white-space:nowrap;
216
- overflow:hidden;
217
- text-overflow:ellipsis;
218
- }
220
+ white-space:nowrap;
221
+ overflow:hidden;
222
+ text-overflow:ellipsis;
223
+ }
219
224
  .stk-table .stk-table-no-data{
220
- background-color:var(--table-bgc);
221
- line-height:var(--row-height);
222
- text-align:center;
223
- font-size:14px;
224
- position:sticky;
225
- left:0px;
226
- border-left:var(--border-width) solid var(--border-color);
227
- border-right:var(--border-width) solid var(--border-color);
228
- border-bottom:var(--border-width) solid var(--border-color);
229
- display:flex;
230
- flex-direction:column;
231
- align-items:center;
232
- justify-content:center;
233
- }
225
+ background-color:var(--table-bgc);
226
+ line-height:var(--row-height);
227
+ text-align:center;
228
+ font-size:14px;
229
+ position:sticky;
230
+ left:0px;
231
+ border-left:var(--border-width) solid var(--border-color);
232
+ border-right:var(--border-width) solid var(--border-color);
233
+ border-bottom:var(--border-width) solid var(--border-color);
234
+ display:flex;
235
+ flex-direction:column;
236
+ align-items:center;
237
+ justify-content:center;
238
+ }
234
239
  .stk-table .stk-table-no-data.no-data-full{
235
- flex:1;
236
- }
240
+ flex:1;
241
+ }
242
+ .stk-table.virtual .stk-table-main thead tr th{
243
+ }
237
244
  .stk-table.virtual .stk-table-main thead tr th .table-header-cell-wrapper{
238
- overflow:hidden;
239
- max-height:var(--row-height);
240
- }
245
+ overflow:hidden;
246
+ max-height:var(--row-height);
247
+ }
241
248
  .stk-table.virtual .stk-table-main tbody{
242
- position:relative;
243
- }
249
+ position:relative;
250
+ }
244
251
  .stk-table.virtual .stk-table-main tbody tr.padding-top-tr td{
245
- height:0;
246
- }
252
+ height:0;
253
+ }
247
254
  .stk-table.virtual .stk-table-main tbody tr td{
248
- height:var(--row-height);
249
- line-height:1;
250
- }
255
+ height:var(--row-height);
256
+ line-height:1;
257
+ }
251
258
  .stk-table.virtual .stk-table-main tbody tr td .table-cell-wrapper{
252
- max-height:var(--row-height);
253
- overflow:hidden;
254
- }
259
+ max-height:var(--row-height);
260
+ overflow:hidden;
261
+ }
255
262
  .stk-table.virtual-x .stk-table-main .virtual-x-left{
256
- padding:0;
257
- }
263
+ padding:0;
264
+ }
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "stk-table-vue",
3
- "version": "0.0.1-beta.8",
3
+ "version": "0.0.1-beta.9",
4
4
  "description": "simple realtime virtual table for vue3",
5
5
  "main": "./lib/stk-table-vue.js",
6
6
  "types": "./lib/StkTable/index.d.ts",
7
- "packageManager": "pnpm@8.11.0",
7
+ "packageManager": "pnpm@8.14.3",
8
8
  "directories": {
9
9
  "test": "test"
10
10
  },
@@ -43,6 +43,7 @@
43
43
  "eslint-plugin-prettier": "^5.0.1",
44
44
  "eslint-plugin-vue": "^9.19.2",
45
45
  "happy-dom": "^12.10.3",
46
+ "less": "^4.2.0",
46
47
  "postcss-discard-comments": "^6.0.1",
47
48
  "postcss-preset-env": "^9.3.0",
48
49
  "prettier": "^3.1.1",
package/src/StkTable/StkTable.vue CHANGED
@@ -196,8 +196,8 @@
196
196
  * [] 计算的高亮颜色，挂在数据源上对象上，若多个表格使用同一个数据源对象会有问题。需要深拷贝。(解决方案：获取组件uid)
197
197
  * [] highlight-row 颜色不能恢复到active的颜色
198
198
  */
199
- import { CSSProperties, computed, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
200
- import { Order, SortOption, StkProps, StkTableColumn } from './types/index';
199
+ import { CSSProperties, onMounted, ref, shallowRef, toRaw, watch } from 'vue';
200
+ import { Order, SortOption, StkTableColumn, UniqKey } from './types/index';
201
201
  import { useAutoResize } from './useAutoResize';
202
202
  import { useColResize } from './useColResize';
203
203
  import { useFixedStyle } from './useFixedStyle';
@@ -207,33 +207,105 @@ import { useThDrag } from './useThDrag';
207
207
  import { useVirtualScroll } from './useVirtualScroll';
208
208
  import { howDeepTheColumn, tableSort } from './utils';
209
209
 
210
- const props = withDefaults(defineProps<StkProps>(), {
211
- width: '',
212
- fixedMode: false,
213
- minWidth: '',
214
- maxWidth: '',
215
- headless: false,
216
- theme: 'light',
217
- virtual: false,
218
- virtualX: false,
219
- columns: () => [],
220
- dataSource: () => [],
221
- rowKey: '',
222
- colKey: 'dataIndex',
223
- emptyCellText: '--',
224
- noDataFull: false,
225
- showNoData: true,
226
- sortRemote: false,
227
- showHeaderOverflow: false,
228
- showOverflow: false,
229
- showTrHoverClass: false,
230
- headerDrag: false,
231
- rowClassName: () => '',
232
- colResizable: false,
233
- colMinWidth: 10,
234
- bordered: true,
235
- autoResize: true,
236
- });
210
+ /**
211
+ * props 不能放在单独的文件中。vue2.7 compiler 构建会出错。
212
+ */
213
+ const props = withDefaults(
214
+ defineProps<{
215
+ width?: string;
216
+ /** 最小表格宽度 */
217
+ minWidth?: string;
218
+ /** 表格最大宽度*/
219
+ maxWidth?: string;
220
+ /** 是否使用 table-layout:fixed */
221
+ fixedMode?: boolean;
222
+ /** 是否隐藏表头 */
223
+ headless?: boolean;
224
+ /** 主题，亮、暗 */
225
+ theme?: 'light' | 'dark';
226
+ /** 虚拟滚动 */
227
+ virtual?: boolean;
228
+ /** x轴虚拟滚动 */
229
+ virtualX?: boolean;
230
+ /** 表格列配置 */
231
+ columns?: StkTableColumn<any>[];
232
+ /** 表格数据源 */
233
+ dataSource?: any[];
234
+ /** 行唯一键 */
235
+ rowKey?: UniqKey;
236
+ /** 列唯一键 */
237
+ colKey?: UniqKey;
238
+ /** 空值展示文字 */
239
+ emptyCellText?: string;
240
+ /** 暂无数据兜底高度是否撑满 */
241
+ noDataFull?: boolean;
242
+ /** 是否展示暂无数据 */
243
+ showNoData?: boolean;
244
+ /** 是否服务端排序，true则不排序数据 */
245
+ sortRemote?: boolean;
246
+ /** 表头是否溢出展示... */
247
+ showHeaderOverflow?: boolean;
248
+ /** 表体溢出是否展示... */
249
+ showOverflow?: boolean;
250
+ /** 是否增加行hover class */
251
+ showTrHoverClass?: boolean;
252
+ /** 表头是否可拖动 */
253
+ headerDrag?: boolean;
254
+ /**
255
+ * 给行附加className<br>
256
+ * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
257
+ */
258
+ rowClassName?: (row: any, i: number) => string;
259
+ /**
260
+ * 列宽是否可拖动<br>
261
+ * **不要设置**列minWidth，**必须**设置width<br>
262
+ * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
263
+ */
264
+ colResizable?: boolean;
265
+ /** 可拖动至最小的列宽 */
266
+ colMinWidth?: number;
267
+ /**
268
+ * 单元格分割线。
269
+ * 默认横竖都有
270
+ * "h" - 仅展示横线
271
+ * "v" - 仅展示竖线
272
+ * "body-v" - 仅表体展示竖线
273
+ */
274
+ bordered?: boolean | 'h' | 'v' | 'body-v';
275
+ /**
276
+ * 自动重新计算虚拟滚动高度宽度。默认true
277
+ * [非响应式]
278
+ */
279
+ autoResize?: boolean;
280
+ }>(),
281
+ {
282
+ width: '',
283
+ fixedMode: false,
284
+ minWidth: '',
285
+ maxWidth: '',
286
+ headless: false,
287
+ theme: 'light',
288
+ virtual: false,
289
+ virtualX: false,
290
+ columns: () => [],
291
+ dataSource: () => [],
292
+ rowKey: '',
293
+ colKey: 'dataIndex',
294
+ emptyCellText: '--',
295
+ noDataFull: false,
296
+ showNoData: true,
297
+ sortRemote: false,
298
+ showHeaderOverflow: false,
299
+ showOverflow: false,
300
+ showTrHoverClass: false,
301
+ headerDrag: false,
302
+ rowClassName: () => '',
303
+ colResizable: false,
304
+ colMinWidth: 10,
305
+ bordered: true,
306
+ autoResize: true,
307
+ },
308
+ );
237
309
 
238
310
  const emit = defineEmits([
239
311
  'sort-change',
@@ -564,7 +636,7 @@ function onTableScroll(e: Event) {
564
636
  }
565
637
 
566
638
  /** tr hover事件 */
567
- function onTrMouseOver(e: MouseEvent, row: any) {
639
+ function onTrMouseOver(_e: MouseEvent, row: any) {
568
640
  if (props.showTrHoverClass) {
569
641
  currentHover.value = rowKeyGen(row);
570
642
  }
package/src/StkTable/index.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { default as StkTable } from './StkTable.vue';
2
2
  export { tableSort, insertToOrderedArray } from './utils';
3
3
  export type { StkTableColumn } from './types/index';
4
- import './style.css';
4
+ import './style.less';
package/src/StkTable/{style.css → style.less} RENAMED
@@ -4,6 +4,7 @@
4
4
  background-color: var(--highlight-color);
5
5
  }
6
6
  }
7
+
7
8
  .stk-table {
8
9
  /* contain: strict;*/
9
10
  --row-height: 28px;
@@ -41,7 +42,8 @@
41
42
  --tr-active-bgc: #283f63;
42
43
  --tr-hover-bgc: #1a2b46;
43
44
  --table-bgc: #181c21;
44
- --highlight-color: #1e4c99; /* 不能用rgba，因为固定列时，会变成半透明*/
45
+ --highlight-color: #1e4c99;
46
+ /* 不能用rgba，因为固定列时，会变成半透明*/
45
47
 
46
48
  --sort-arrow-color: #5d6064;
47
49
  --sort-arrow-hover-color: #727782;
@@ -50,7 +52,8 @@
50
52
 
51
53
  --col-resize-indicator-color: #5d6064;
52
54
 
53
- /* background-color: var(--table-bgc); */ /* ⭐这里加background-color会导致表格出滚动白屏*/
55
+ /* background-color: var(--table-bgc); */
56
+ /* ⭐这里加background-color会导致表格出滚动白屏*/
54
57
  color: #d0d1d2;
55
58
  }
56
59
 
@@ -74,26 +77,31 @@
74
77
  min-width: min-content !important;
75
78
  }
76
79
  }
80
+
77
81
  /** 调整列宽的时候不要触发th事件。否则会导致触发表头点击排序 */
78
- &.is-col-resizing {
82
+ &.is-col-resizing {
79
83
  th {
80
- pointer-events: none;
84
+ pointer-events: none;
81
85
  }
82
86
  }
87
+
83
88
  &.border-h {
84
89
  --bg-border-right: linear-gradient(transparent, transparent);
85
90
  --bg-border-left: linear-gradient(transparent, transparent);
86
91
  }
92
+
87
93
  &.border-v {
88
94
  --bg-border-bottom: linear-gradient(transparent, transparent);
89
95
  }
90
96
 
91
97
  &.border {
92
98
  .stk-table-main {
99
+
93
100
  th,
94
101
  td {
95
102
  background-image: var(--bg-border-right), var(--bg-border-bottom);
96
103
  }
104
+
97
105
  thead {
98
106
  tr {
99
107
  &:first-child th {
@@ -103,6 +111,7 @@
103
111
  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
104
112
  }
105
113
  }
114
+
106
115
  th {
107
116
  &:first-child {
108
117
  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
@@ -110,6 +119,7 @@
110
119
  }
111
120
  }
112
121
  }
122
+
113
123
  tbody {
114
124
  td {
115
125
  &:first-child {
@@ -121,17 +131,18 @@
121
131
 
122
132
  &.virtual-x {
123
133
  .stk-table-main {
124
- thead tr:first-child .virtual-x-left + th {
134
+ thead tr:first-child .virtual-x-left+th {
125
135
  /* 横向虚拟滚动时，左侧第一个单元格加上border-left*/
126
136
  background-image: var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
127
137
  }
128
138
 
129
- tr .virtual-x-left + th {
139
+ tr .virtual-x-left+th {
130
140
  background-image: var(--bg-border-right), var(--bg-border-bottom), var(--bg-border-left);
131
141
  }
132
142
  }
133
143
  }
134
144
  }
145
+
135
146
  &.border-body-v {
136
147
  .stk-table-main {
137
148
  tbody {
@@ -154,8 +165,13 @@
154
165
  .stk-table-main {
155
166
  border-spacing: 0;
156
167
  border-collapse: separate;
168
+ width: fit-content;
169
+ /* 不加会导致width 超过100%时为100%，行hover高亮会断开*/
170
+ min-width: 100%;
171
+
157
172
  &.fixed-mode {
158
173
  table-layout: fixed;
174
+ min-width: min-content;
159
175
  }
160
176
 
161
177
  th,
@@ -205,6 +221,7 @@
205
221
 
206
222
  &.sorter-desc .table-header-cell-wrapper .table-header-sorter {
207
223
  display: initial;
224
+
208
225
  #arrow-up {
209
226
  fill: var(--sort-arrow-active-sub-color);
210
227
  }
@@ -216,6 +233,7 @@
216
233
 
217
234
  &.sorter-asc .table-header-cell-wrapper .table-header-sorter {
218
235
  display: initial;
236
+
219
237
  #arrow-up {
220
238
  fill: var(--sort-arrow-active-color);
221
239
  }
@@ -226,7 +244,8 @@
226
244
  }
227
245
 
228
246
  .table-header-cell-wrapper {
229
- max-width: 100%; /*最大宽度不超过列宽*/
247
+ max-width: 100%;
248
+ /*最大宽度不超过列宽*/
230
249
  display: inline-flex;
231
250
  align-items: center;
232
251
 
@@ -241,6 +260,7 @@
241
260
  width: 16px;
242
261
  height: 16px;
243
262
  display: none;
263
+
244
264
  #arrow-up,
245
265
  #arrow-down {
246
266
  fill: var(--sort-arrow-color);
@@ -270,7 +290,8 @@
270
290
  tbody {
271
291
 
272
292
  tr {
273
- background-color: var(--td-bgc); /* td inherit tr bgc*/
293
+ background-color: var(--td-bgc);
294
+ /* td inherit tr bgc*/
274
295
 
275
296
  &.highlight-row {
276
297
  animation: stkTableDim 2s linear;
@@ -291,7 +312,8 @@
291
312
 
292
313
  td {
293
314
  &.fixed-cell {
294
- background-color: inherit; /* 防止横向滚动后透明*/
315
+ background-color: inherit;
316
+ /* 防止横向滚动后透明*/
295
317
  }
296
318
 
297
319
  &.highlight-cell {
@@ -381,6 +403,7 @@
381
403
  thead {
382
404
  tr {
383
405
  th {
406
+
384
407
  /* 为不影响布局，表头行高要定死*/
385
408
  .table-header-cell-wrapper {
386
409
  overflow: hidden;
@@ -397,6 +420,7 @@
397
420
  &.padding-top-tr td {
398
421
  height: 0;
399
422
  }
423
+
400
424
  td {
401
425
  height: var(--row-height);
402
426
  line-height: 1;
package/src/StkTable/types/index.ts CHANGED
@@ -55,95 +55,3 @@ export type SortState<T> = {
55
55
  };
56
56
 
57
57
  export type UniqKey = string | ((param: any) => string);
58
-
59
- export type StkProps = Partial<{
60
- width: string;
61
-
62
- /** 最小表格宽度 */
63
- minWidth: string;
64
-
65
- /** 表格最大宽度*/
66
- maxWidth: string;
67
-
68
- /** 是否使用 table-layout:fixed */
69
- fixedMode: boolean;
70
-
71
- /** 是否隐藏表头 */
72
- headless: boolean;
73
-
74
- /** 主题，亮、暗 */
75
- theme: 'light' | 'dark';
76
-
77
- /** 虚拟滚动 */
78
- virtual: boolean;
79
-
80
- /** x轴虚拟滚动 */
81
- virtualX: boolean;
82
-
83
- /** 表格列配置 */
84
- columns: StkTableColumn<any>[];
85
-
86
- /** 表格数据源 */
87
- dataSource: any[];
88
-
89
- /** 行唯一键 */
90
- rowKey: UniqKey;
91
-
92
- /** 列唯一键 */
93
- colKey: UniqKey;
94
-
95
- /** 空值展示文字 */
96
- emptyCellText: string;
97
-
98
- /** 暂无数据兜底高度是否撑满 */
99
- noDataFull: boolean;
100
-
101
- /** 是否展示暂无数据 */
102
- showNoData: boolean;
103
-
104
- /** 是否服务端排序，true则不排序数据 */
105
- sortRemote: boolean;
106
-
107
- /** 表头是否溢出展示... */
108
- showHeaderOverflow: boolean;
109
-
110
- /** 表体溢出是否展示... */
111
- showOverflow: boolean;
112
-
113
- /** 是否增加行hover class */
114
- showTrHoverClass: boolean;
115
-
116
- /** 表头是否可拖动 */
117
- headerDrag: boolean;
118
-
119
- /**
120
- * 给行附加className<br>
121
- * FIXME: 是否需要优化，因为不传此prop会使表格行一直执行空函数，是否有影响
122
- */
123
- rowClassName: (row: any, i: number) => string;
124
-
125
- /**
126
- * 列宽是否可拖动<br>
127
- * **不要设置**列minWidth，**必须**设置width<br>
128
- * 列宽拖动时，每一列都必须要有width，且minWidth/maxWidth不生效。table width会变为"fit-content"。
129
- */
130
- colResizable: boolean;
131
-
132
- /** 可拖动至最小的列宽 */
133
- colMinWidth: number;
134
-
135
- /**
136
- * 单元格分割线。
137
- * 默认横竖都有
138
- * "h" - 仅展示横线
139
- * "v" - 仅展示竖线
140
- * "body-v" - 仅表体展示竖线
141
- */
142
- bordered: boolean | 'h' | 'v' | 'body-v';
143
-
144
- /**
145
- * 自动重新计算虚拟滚动高度宽度。默认true
146
- * [非响应式]
147
- */
148
- autoResize: boolean;
149
- }>;