vxe-table 4.18.7 → 4.18.8

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 (148) hide show
  1. package/LICENSE +20 -20
  2. package/README.en.md +118 -118
  3. package/README.ja-JP.md +117 -117
  4. package/README.md +268 -268
  5. package/README.zh-TW.md +117 -117
  6. package/es/style.css +1 -1
  7. package/es/table/src/table.js +85 -78
  8. package/es/table/src/util.js +6 -0
  9. package/es/table/style.css +18 -48
  10. package/es/ui/index.js +1 -1
  11. package/es/ui/src/dom.js +21 -0
  12. package/es/ui/src/log.js +1 -1
  13. package/es/vxe-table/style.css +18 -48
  14. package/lib/index.common.js +2 -1
  15. package/lib/index.umd.js +2762 -2833
  16. package/lib/index.umd.min.js +1 -1
  17. package/lib/style.css +1 -1
  18. package/lib/table/src/table.js +14 -11
  19. package/lib/table/src/table.min.js +1 -1
  20. package/lib/table/src/util.js +6 -0
  21. package/lib/table/src/util.min.js +1 -1
  22. package/lib/table/style/style.css +18 -48
  23. package/lib/ui/index.js +1 -1
  24. package/lib/ui/index.min.js +1 -1
  25. package/lib/ui/src/dom.js +23 -0
  26. package/lib/ui/src/dom.min.js +1 -1
  27. package/lib/ui/src/log.js +1 -1
  28. package/lib/ui/src/log.min.js +1 -1
  29. package/lib/v-x-e-table/index.js +2 -1
  30. package/lib/v-x-e-table/index.min.js +1 -1
  31. package/lib/vxe-colgroup/index.js +2 -1
  32. package/lib/vxe-colgroup/index.min.js +1 -1
  33. package/lib/vxe-column/index.js +2 -1
  34. package/lib/vxe-column/index.min.js +1 -1
  35. package/lib/vxe-grid/index.js +2 -1
  36. package/lib/vxe-grid/index.min.js +1 -1
  37. package/lib/vxe-table/index.js +2 -1
  38. package/lib/vxe-table/index.min.js +1 -1
  39. package/lib/vxe-table/style/style.css +18 -48
  40. package/lib/vxe-toolbar/index.js +2 -1
  41. package/lib/vxe-toolbar/index.min.js +1 -1
  42. package/lib/vxe-ui/index.js +2 -1
  43. package/lib/vxe-ui/index.min.js +1 -1
  44. package/lib/vxe-v-x-e-table/index.js +2 -1
  45. package/lib/vxe-v-x-e-table/index.min.js +1 -1
  46. package/package.json +91 -91
  47. package/packages/colgroup/index.ts +22 -22
  48. package/packages/column/index.ts +22 -22
  49. package/packages/components.ts +43 -43
  50. package/packages/grid/index.ts +18 -18
  51. package/packages/grid/src/emits.ts +19 -19
  52. package/packages/grid/src/grid.ts +1768 -1768
  53. package/packages/grid/src/props.ts +23 -23
  54. package/packages/index.ts +4 -4
  55. package/packages/locale/lang/ar-EG.ts +832 -832
  56. package/packages/locale/lang/de-DE.ts +832 -832
  57. package/packages/locale/lang/en-US.ts +832 -832
  58. package/packages/locale/lang/es-ES.ts +832 -832
  59. package/packages/locale/lang/fr-FR.ts +832 -832
  60. package/packages/locale/lang/hu-HU.ts +832 -832
  61. package/packages/locale/lang/hy-AM.ts +832 -832
  62. package/packages/locale/lang/id-ID.ts +832 -832
  63. package/packages/locale/lang/it-IT.ts +832 -832
  64. package/packages/locale/lang/ja-JP.ts +832 -832
  65. package/packages/locale/lang/ko-KR.ts +832 -832
  66. package/packages/locale/lang/ms-MY.ts +832 -832
  67. package/packages/locale/lang/nb-NO.ts +832 -832
  68. package/packages/locale/lang/pt-BR.ts +832 -832
  69. package/packages/locale/lang/ru-RU.ts +832 -832
  70. package/packages/locale/lang/th-TH.ts +832 -832
  71. package/packages/locale/lang/ug-CN.ts +832 -832
  72. package/packages/locale/lang/uk-UA.ts +832 -832
  73. package/packages/locale/lang/uz-UZ.ts +832 -832
  74. package/packages/locale/lang/vi-VN.ts +832 -832
  75. package/packages/locale/lang/zh-CHT.ts +832 -832
  76. package/packages/locale/lang/zh-CN.ts +832 -832
  77. package/packages/locale/lang/zh-HK.ts +3 -3
  78. package/packages/locale/lang/zh-MO.ts +3 -3
  79. package/packages/locale/lang/zh-TC.ts +3 -3
  80. package/packages/locale/lang/zh-TW.ts +3 -3
  81. package/packages/table/index.ts +26 -26
  82. package/packages/table/module/custom/hook.ts +359 -359
  83. package/packages/table/module/custom/panel.ts +1331 -1331
  84. package/packages/table/module/edit/hook.ts +1032 -1032
  85. package/packages/table/module/export/export-panel.ts +567 -567
  86. package/packages/table/module/export/hook.ts +1654 -1654
  87. package/packages/table/module/export/import-panel.ts +266 -266
  88. package/packages/table/module/export/util.ts +24 -24
  89. package/packages/table/module/filter/hook.ts +468 -468
  90. package/packages/table/module/filter/panel.ts +301 -301
  91. package/packages/table/module/keyboard/hook.ts +495 -495
  92. package/packages/table/module/menu/hook.ts +325 -325
  93. package/packages/table/module/menu/panel.ts +201 -201
  94. package/packages/table/module/validator/hook.ts +631 -631
  95. package/packages/table/render/index.ts +1440 -1440
  96. package/packages/table/src/body.ts +932 -932
  97. package/packages/table/src/cell.ts +1290 -1290
  98. package/packages/table/src/column.ts +190 -190
  99. package/packages/table/src/columnInfo.ts +225 -225
  100. package/packages/table/src/emits.ts +123 -123
  101. package/packages/table/src/footer.ts +368 -368
  102. package/packages/table/src/group.ts +59 -59
  103. package/packages/table/src/header.ts +559 -559
  104. package/packages/table/src/props.ts +324 -324
  105. package/packages/table/src/store.ts +14 -14
  106. package/packages/table/src/table.ts +14010 -14004
  107. package/packages/table/src/use/cell-view.ts +44 -44
  108. package/packages/table/src/use/index.ts +1 -1
  109. package/packages/table/src/util.ts +1070 -1064
  110. package/packages/toolbar/index.ts +18 -18
  111. package/packages/toolbar/src/toolbar.ts +701 -701
  112. package/packages/ui/index.ts +530 -530
  113. package/packages/ui/src/anime.ts +52 -52
  114. package/packages/ui/src/comp.ts +3 -3
  115. package/packages/ui/src/dom.ts +259 -236
  116. package/packages/ui/src/log.ts +8 -8
  117. package/packages/ui/src/utils.ts +56 -56
  118. package/packages/ui/src/vn.ts +55 -55
  119. package/packages/v-x-e-table/index.d.ts +4 -4
  120. package/packages/v-x-e-table/index.ts +4 -4
  121. package/styles/all.scss +7 -7
  122. package/styles/base.scss +16 -16
  123. package/styles/components/grid.scss +89 -89
  124. package/styles/components/icon.scss +225 -225
  125. package/styles/components/old-icon.scss +715 -715
  126. package/styles/components/table-module/all.scss +6 -6
  127. package/styles/components/table-module/custom.scss +527 -527
  128. package/styles/components/table-module/export.scss +130 -130
  129. package/styles/components/table-module/filter.scss +130 -130
  130. package/styles/components/table-module/menu.scss +81 -81
  131. package/styles/components/table.scss +2679 -2679
  132. package/styles/components/toolbar.scss +119 -119
  133. package/styles/default.scss +2 -2
  134. package/styles/helpers/baseMixin.scss +95 -95
  135. package/styles/index.scss +4 -4
  136. package/styles/modules.scss +5 -5
  137. package/styles/theme/base.scss +93 -93
  138. package/styles/theme/dark.scss +49 -49
  139. package/styles/theme/light.scss +44 -44
  140. package/styles/variable.scss +43 -43
  141. package/types/all.d.ts +37 -37
  142. package/types/index.d.ts +4 -4
  143. /package/es/{iconfont.1773991907408.ttf → iconfont.1774240404046.ttf} +0 -0
  144. /package/es/{iconfont.1773991907408.woff → iconfont.1774240404046.woff} +0 -0
  145. /package/es/{iconfont.1773991907408.woff2 → iconfont.1774240404046.woff2} +0 -0
  146. /package/lib/{iconfont.1773991907408.ttf → iconfont.1774240404046.ttf} +0 -0
  147. /package/lib/{iconfont.1773991907408.woff → iconfont.1774240404046.woff} +0 -0
  148. /package/lib/{iconfont.1773991907408.woff2 → iconfont.1774240404046.woff2} +0 -0
package/styles/components/table.scss CHANGED
@@ -1,2679 +1,2679 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use '../helpers/baseMixin.scss';
4
- @use './icon.scss';
5
- @use './table-module/all.scss';
6
-
7
- $btnThemeList: (
8
- (
9
- name: "primary",
10
- textColor: var(--vxe-ui-font-primary-color),
11
- ),
12
- (
13
- name: "success",
14
- textColor: var(--vxe-ui-status-success-color),
15
- ),
16
- (
17
- name: "info",
18
- textColor: var(--vxe-ui-status-info-color),
19
- ),
20
- (
21
- name: "warning",
22
- textColor: var(--vxe-ui-status-warning-color),
23
- ),
24
- (
25
- name: "danger",
26
- textColor: var(--vxe-ui-status-danger-color),
27
- ),
28
- (
29
- name: "error",
30
- textColor: var(--vxe-ui-status-error-color),
31
- )
32
- );
33
-
34
- .vxe-table-slots,
35
- .vxe-table--file-form {
36
- display: none;
37
- }
38
-
39
- .vxe-table-vars {
40
- height: 0;
41
- width: 0;
42
- visibility: hidden;
43
- overflow: hidden;
44
- user-select: none;
45
- pointer-events: none;
46
- .vxe-table-var-default {
47
- height: var(--vxe-ui-table-row-height-default);
48
- }
49
- .vxe-table-var-medium {
50
- height: var(--vxe-ui-table-row-height-medium);
51
- }
52
- .vxe-table-var-small {
53
- height: var(--vxe-ui-table-row-height-small);
54
- }
55
- .vxe-table-var-mini {
56
- height: var(--vxe-ui-table-row-height-mini);
57
- }
58
- }
59
-
60
- .vxe-table--print-frame {
61
- position: fixed;
62
- bottom: -100%;
63
- left: -100%;
64
- height: 0;
65
- width: 0;
66
- border: 0;
67
- }
68
- .vxe-table--layout-wrapper {
69
- display: flex;
70
- flex-direction: row;
71
- background-color: var(--vxe-ui-layout-background-color);
72
- }
73
- .vxe-table--viewport-wrapper {
74
- position: relative;
75
- overflow: hidden;
76
- flex-grow: 1;
77
- &.x-ob--contain {
78
- & > .vxe-table--main-wrapper {
79
- & > .vxe-table--header-wrapper {
80
- & > .vxe-table--header-inner-wrapper {
81
- overscroll-behavior-x: contain;
82
- }
83
- }
84
- & > .vxe-table--body-wrapper {
85
- & > .vxe-table--body-inner-wrapper {
86
- overscroll-behavior-x: contain;
87
- }
88
- }
89
- & > .vxe-table--footer-wrapper {
90
- & > .vxe-table--footer-inner-wrapper {
91
- overscroll-behavior-x: contain;
92
- }
93
- }
94
- }
95
- }
96
- &.y-ob--contain {
97
- & > .vxe-table--main-wrapper {
98
- & > .vxe-table--body-wrapper {
99
- & > .vxe-table--body-inner-wrapper {
100
- overscroll-behavior-y: contain;
101
- }
102
- }
103
- }
104
- }
105
- }
106
- .vxe-table--header-wrapper,
107
- .vxe-table--body-wrapper,
108
- .vxe-table--footer-wrapper,
109
- .vxe-table--fixed-left-body-wrapper,
110
- .vxe-table--fixed-right-body-wrapper {
111
- overflow: hidden;
112
- outline: 0;
113
- scrollbar-width: none;
114
- -webkit-overflow-scrolling: touch;
115
- }
116
- .vxe-table--header-inner-wrapper,
117
- .vxe-table--body-inner-wrapper,
118
- .vxe-table--footer-inner-wrapper {
119
- position: relative;
120
- width: 100%;
121
- height: 100%;
122
- scrollbar-width: none;
123
- -ms-overflow-style: none;
124
- -webkit-overflow-scrolling: touch;
125
- &::-webkit-scrollbar {
126
- display: none;
127
- }
128
- }
129
- .vxe-table--header-inner-wrapper,
130
- .vxe-table--footer-inner-wrapper {
131
- overflow-y: hidden;
132
- overflow-x: scroll;
133
- }
134
- .vxe-table--body-inner-wrapper {
135
- overflow-y: scroll;
136
- overflow-x: scroll;
137
- }
138
-
139
- // 禁用滚动条
140
- .vxe-table--main-wrapper {
141
- &.sx--hidden {
142
- & > .vxe-table--header-wrapper {
143
- & > .vxe-table--header-inner-wrapper {
144
- overflow-x: hidden;
145
- }
146
- }
147
- & > .vxe-table--body-wrapper {
148
- & > .vxe-table--body-inner-wrapper {
149
- overflow-x: hidden;
150
- }
151
- }
152
- & > .vxe-table--footer-wrapper {
153
- & > .vxe-table--footer-inner-wrapper {
154
- overflow-x: hidden;
155
- }
156
- }
157
- }
158
- &.sy--hidden {
159
- & > .vxe-table--body-wrapper {
160
- & > .vxe-table--body-inner-wrapper {
161
- overflow-y: hidden;
162
- }
163
- }
164
- }
165
- }
166
- .vxe-table--fixed-left-wrapper,
167
- .vxe-table--fixed-right-wrapper {
168
- &.sx--hidden {
169
- & > .vxe-table--body-wrapper {
170
- & > .vxe-table--body-inner-wrapper {
171
- overflow-x: hidden;
172
- }
173
- }
174
- }
175
- &.sy--hidden {
176
- & > .vxe-table--body-wrapper {
177
- & > .vxe-table--body-inner-wrapper {
178
- overflow-y: hidden;
179
- }
180
- }
181
- }
182
- }
183
-
184
- .vxe-loading--custom-wrapper {
185
- display: none;
186
- position: absolute;
187
- width: 100%;
188
- height: 100%;
189
- top: 0;
190
- left: 0;
191
- z-index: 99;
192
- user-select: none;
193
- &.is--visible {
194
- display: block;
195
- }
196
- }
197
-
198
- /*默认的渲染*/
199
- .vxe-header--column,
200
- .vxe-footer--column {
201
- &.fixed--width {
202
- & > .vxe-cell {
203
- & > .vxe-cell--wrapper {
204
- .vxe-default-input,
205
- .vxe-default-textarea,
206
- .vxe-default-select {
207
- width: 100%;
208
- }
209
- .vxe-input,
210
- .vxe-textarea,
211
- .vxe-select,
212
- .vxe-tree-select,
213
- .vxe-date-picker,
214
- .vxe-date-range-picker,
215
- .vxe-number-input,
216
- .vxe-ico-picker {
217
- width: 100%;
218
- }
219
- }
220
- }
221
- }
222
- }
223
- .vxe-body--column {
224
- &.fixed--width {
225
- & > .vxe-cell {
226
- & > .vxe-cell--wrapper {
227
- & > .vxe-default-input,
228
- & > .vxe-default-textarea,
229
- & > .vxe-default-select {
230
- width: 100%;
231
- }
232
- & > .vxe-input,
233
- & > .vxe-textarea,
234
- & > .vxe-select,
235
- & > .vxe-tree-select,
236
- & > .vxe-date-picker,
237
- & > .vxe-date-range-picker,
238
- & > .vxe-number-input,
239
- & > .vxe-ico-picker {
240
- width: 100%;
241
- }
242
- & > .vxe-row-group--tree-node,
243
- & > .vxe-cell--tree-node {
244
- .vxe-default-input,
245
- .vxe-default-textarea,
246
- .vxe-default-select,
247
- .vxe-input,
248
- .vxe-textarea,
249
- .vxe-select,
250
- .vxe-tree-select,
251
- .vxe-date-picker,
252
- .vxe-date-range-picker,
253
- .vxe-number-input,
254
- .vxe-ico-picker {
255
- width: 100%;
256
- }
257
- }
258
- }
259
- }
260
- }
261
- }
262
- .vxe-table--filter-template {
263
- & > .vxe-default-input,
264
- & > .vxe-default-textarea,
265
- & > .vxe-default-select {
266
- width: 100%;
267
- }
268
- & > .vxe-input,
269
- & > .vxe-textarea,
270
- & > .vxe-select,
271
- & > .vxe-tree-select,
272
- & > .vxe-date-picker,
273
- & > .vxe-date-range-picker,
274
- & > .vxe-number-input,
275
- & > .vxe-ico-picker {
276
- width: 100%;
277
- }
278
- }
279
- .vxe-cell,
280
- .vxe-table--filter-template {
281
- .vxe-default-input,
282
- .vxe-default-textarea {
283
- background-color: var(--vxe-ui-layout-background-color);
284
- }
285
- .vxe-default-input,
286
- .vxe-default-textarea,
287
- .vxe-default-select {
288
- font-family: var(--vxe-ui-font-family);
289
- outline: 0;
290
- color: var(--vxe-ui-font-color);
291
- border-radius: var(--vxe-ui-border-radius);
292
- border: 1px solid var(--vxe-ui-input-border-color);
293
- &:focus {
294
- border: 1px solid var(--vxe-ui-font-primary-color);
295
- }
296
- &[disabled] {
297
- cursor: not-allowed;
298
- background-color: var(--vxe-ui-input-disabled-background-color);
299
- }
300
- }
301
- .vxe-default-input,
302
- .vxe-default-textarea,
303
- .vxe-default-select {
304
- height: var(--vxe-ui-input-height-default);
305
- }
306
- .vxe-default-input {
307
- &[type="date"]::-webkit-inner-spin-button {
308
- margin-top: 4px;
309
- }
310
- &[type="date"]::-webkit-inner-spin-button,
311
- &[type="number"]::-webkit-inner-spin-button {
312
- height: 24px;
313
- }
314
- &::placeholder {
315
- color: var(--vxe-ui-input-placeholder-color);
316
- }
317
- }
318
- .vxe-default-textarea {
319
- font-size: 1em;
320
- resize: none;
321
- vertical-align: middle;
322
- }
323
- & > .vxe-input > .vxe-input--inner,
324
- & > .vxe-textarea > .vxe-textarea--inner {
325
- padding: 0 2px;
326
- }
327
- & > .vxe-textarea--inner,
328
- & > .vxe-default-textarea {
329
- resize: none;
330
- }
331
- & > .vxe-row-group--tree-node,
332
- & > .vxe-cell--tree-node {
333
- .vxe-input > .vxe-input--inner,
334
- .vxe-textarea > .vxe-textarea--inner {
335
- padding: 0 2px;
336
- }
337
- .vxe-textarea--inner,
338
- .vxe-default-textarea {
339
- resize: none;
340
- }
341
- }
342
- }
343
- .vxe-body--column {
344
- &.col--vertical-top {
345
- &.col--active {
346
- & > .vxe-cell {
347
- & > .vxe-cell--wrapper {
348
- height: 100%;
349
- & > .vxe-default-textarea {
350
- height: 100%;
351
- }
352
- }
353
- }
354
- }
355
- }
356
- }
357
- /*行高*/
358
- .vxe-table {
359
- &:not([data-calc-row]) {
360
- .vxe-body--column {
361
- &.col--vertical-top {
362
- &:not(.col--active) {
363
- & > .vxe-cell {
364
- & > .vxe-cell--wrapper {
365
- min-height: 100%;
366
- }
367
- }
368
- }
369
- }
370
- }
371
- }
372
- }
373
-
374
- /*负数显示红色*/
375
- .vxe-cell--label {
376
- &.is--negative {
377
- color: var(--vxe-ui-table-cell-negative-color);
378
- }
379
- }
380
-
381
- .vxe-table--checkbox-range,
382
- .vxe-table--cell-main-area,
383
- .vxe-table--cell-item-area,
384
- .vxe-table--cell-extend-area,
385
- .vxe-table--cell-active-area,
386
- .vxe-table--cell-copy-area,
387
- .vxe-table--cell-col-status-area,
388
- .vxe-table--cell-row-status-area {
389
- display: none;
390
- position: absolute;
391
- pointer-events: none;
392
- z-index: 1;
393
- }
394
-
395
- .vxe-table--header-wrapper {
396
- .vxe-table--cell-col-status-area {
397
- top: 0;
398
- height: 100%;
399
- }
400
- }
401
-
402
- .vxe-table--fixed-left-wrapper,
403
- .vxe-table--fixed-right-wrapper {
404
- .vxe-table--checkbox-range,
405
- .vxe-table--cell-main-area,
406
- .vxe-table--cell-item-area,
407
- .vxe-table--cell-extend-area,
408
- .vxe-table--cell-active-area,
409
- .vxe-table--cell-copy-area,
410
- .vxe-table--cell-col-status-area,
411
- .vxe-table--cell-row-status-area {
412
- z-index: 2;
413
- }
414
- }
415
-
416
- .vxe-table--fixed-left-wrapper {
417
- .vxe-table--cell-main-area,
418
- .vxe-table--cell-item-area,
419
- .vxe-table--cell-extend-area,
420
- .vxe-table--cell-active-area {
421
- &[half="1"] {
422
- border-right: 0;
423
- }
424
- }
425
- .vxe-table--cell-copy-area {
426
- &[half="1"] {
427
- background-size: var(--vxe-ui-table-cell-clip-area-border-width) 12px, 0 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
428
- }
429
- }
430
- }
431
-
432
- .vxe-table--fixed-right-wrapper {
433
- .vxe-table--cell-main-area,
434
- .vxe-table--cell-item-area,
435
- .vxe-table--cell-extend-area,
436
- .vxe-table--cell-active-area {
437
- &[half="1"] {
438
- border-left: 0;
439
- }
440
- }
441
- .vxe-table--cell-copy-area {
442
- &[half="1"] {
443
- background-size: 0 12px, var(--vxe-ui-table-cell-clip-area-border-width) 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
444
- }
445
- }
446
- }
447
-
448
- /*复选框-范围选择*/
449
- .vxe-table--checkbox-range {
450
- background-color: var(--vxe-ui-table-checkbox-range-background-color);
451
- border: var(--vxe-ui-table-checkbox-range-border-width) solid var(--vxe-ui-table-checkbox-range-border-color);
452
- }
453
-
454
- .vxe-table--cell-area {
455
- height: 0;
456
- font-size: 0;
457
- display: none;
458
- & > .vxe-table--cell-main-area {
459
- background-color: var(--vxe-ui-table-cell-area-background-color);
460
- border: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
461
- }
462
- .vxe-table--cell-main-area-btn {
463
- display: none;
464
- position: absolute;
465
- right: -1px;
466
- bottom: -1px;
467
- width: 7px;
468
- height: 7px;
469
- border-style: solid;
470
- border-color: var(--vxe-ui-table-cell-main-area-extension-border-color);
471
- border-width: 1px 0 0 1px;
472
- background-color: var(--vxe-ui-table-cell-main-area-extension-background-color);
473
- pointer-events: auto;
474
- cursor: crosshair;
475
- }
476
- .vxe-table--cell-extend-area {
477
- border: var(--vxe-ui-table-cell-extend-area-border-width) solid var(--vxe-ui-table-cell-extend-area-border-color);
478
- }
479
- .vxe-table--cell-col-status-area,
480
- .vxe-table--cell-row-status-area {
481
- background-color: var(--vxe-ui-table-cell-area-status-background-color);
482
- }
483
- .vxe-table--cell-col-status-area {
484
- border-bottom: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
485
- }
486
- .vxe-table--cell-row-status-area {
487
- border-right: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
488
- }
489
- }
490
-
491
- @keyframes moveCopyCellBorder {
492
- from {
493
- }
494
- to {
495
- background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
496
- }
497
- }
498
-
499
- .vxe-table--cell-copy-area {
500
- background: linear-gradient(0deg, transparent 6px, var(--vxe-ui-table-cell-clip-area-border-color) 6px) repeat-y,
501
- linear-gradient(0deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-y,
502
- linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-x,
503
- linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-x;
504
- background-size: var(--vxe-ui-table-cell-clip-area-border-width) 12px, var(--vxe-ui-table-cell-clip-area-border-width) 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
505
- background-position: 0 0, 100% 0, 0 0, 0 100%;
506
- animation: moveCopyCellBorder .5s infinite linear;
507
- }
508
-
509
- .vxe-table--cell-active-area {
510
- border-color: var(--vxe-ui-table-cell-active-area-border-color);
511
- border-style: solid;
512
- border-width: var(--vxe-ui-table-cell-active-area-border-width);
513
- background-color: var(--vxe-ui-table-cell-active-area-background-color);
514
- }
515
-
516
- .vxe-table--cell-multi-area {
517
- & > .vxe-table--cell-item-area {
518
- background-color: var(--vxe-ui-table-cell-area-background-color);
519
- }
520
- }
521
-
522
- /*圆角*/
523
- .vxe-table--render-default {
524
- &.is--round {
525
- %AllRadius {
526
- border-radius: var(--vxe-ui-table-border-radius);
527
- }
528
- %TopRadius {
529
- border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
530
- }
531
- %TopLeftRadius {
532
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
533
- }
534
- %TopRightRadius {
535
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
536
- }
537
- %BottomRadius {
538
- border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
539
- }
540
- %BottomLeftRadius {
541
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
542
- }
543
- %BottomRightRadius {
544
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
545
- }
546
- @extend %AllRadius;
547
- &.sy-pos--right {
548
- &.sx-pos--bottom {
549
- &.is--scroll-y {
550
- &.is--scroll-x {
551
- .vxe-table--header-wrapper {
552
- &.body--wrapper {
553
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
554
- }
555
- &.fixed-left--wrapper {
556
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
557
- }
558
- }
559
- .vxe-table--border-line {
560
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
561
- }
562
- }
563
- &.not--scroll-x {
564
- .vxe-table--header-wrapper {
565
- &.body--wrapper {
566
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
567
- }
568
- &.fixed-left--wrapper {
569
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
570
- }
571
- }
572
- .vxe-table--footer-wrapper {
573
- &.body--wrapper {
574
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
575
- }
576
- &.fixed-left--wrapper {
577
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
578
- }
579
- }
580
- .vxe-table--border-line {
581
- border-radius: var(--vxe-ui-table-border-radius) 0 0 var(--vxe-ui-table-border-radius);
582
- }
583
- }
584
- }
585
- &.not--scroll-y {
586
- &.is--scroll-x {
587
- .vxe-table--header-wrapper {
588
- &.body--wrapper {
589
- border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
590
- }
591
- &.fixed-left--wrapper {
592
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
593
- }
594
- &.fixed-right--wrapper {
595
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
596
- }
597
- }
598
- .vxe-table--border-line {
599
- border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
600
- }
601
- }
602
- &.not--scroll-x {
603
- .vxe-table--header-wrapper {
604
- &.body--wrapper {
605
- border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
606
- }
607
- &.fixed-right--wrapper {
608
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
609
- }
610
- }
611
- .vxe-table--footer-wrapper {
612
- &.body--wrapper {
613
- border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
614
- }
615
- &.fixed-right--wrapper {
616
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
617
- }
618
- }
619
- .vxe-table--border-line {
620
- @extend %AllRadius;
621
- }
622
- }
623
- }
624
- }
625
- &.sx-pos--top {
626
- &.is--scroll-y {
627
- &.is--scroll-x {
628
- .vxe-table--footer-wrapper {
629
- &.body--wrapper {
630
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
631
- }
632
- &.fixed-left--wrapper {
633
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
634
- }
635
- }
636
- .vxe-table--border-line {
637
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
638
- }
639
- }
640
- &.not--scroll-x {
641
- .vxe-table--header-wrapper {
642
- &.body--wrapper {
643
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
644
- }
645
- &.fixed-left--wrapper {
646
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
647
- }
648
- }
649
- .vxe-table--footer-wrapper {
650
- &.body--wrapper {
651
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
652
- }
653
- &.fixed-left--wrapper {
654
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
655
- }
656
- }
657
- .vxe-table--border-line {
658
- border-radius: var(--vxe-ui-table-border-radius) 0 0 var(--vxe-ui-table-border-radius);
659
- }
660
- }
661
- }
662
- &.not--scroll-y {
663
- &.is--scroll-x {
664
- .vxe-table--footer-wrapper {
665
- &.body--wrapper {
666
- border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
667
- }
668
- &.fixed-left--wrapper {
669
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
670
- }
671
- &.fixed-right--wrapper {
672
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
673
- }
674
- }
675
- .vxe-table--border-line {
676
- border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
677
- }
678
- }
679
- &.not--scroll-x {
680
- .vxe-table--border-line {
681
- @extend %AllRadius;
682
- }
683
- }
684
- }
685
- }
686
- }
687
- &.sy-pos--left {
688
- &.sx-pos--bottom {
689
- &.is--scroll-y {
690
- &.is--scroll-x {
691
- .vxe-table--border-line {
692
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
693
- }
694
- }
695
- &.not--scroll-x {
696
- .vxe-table--header-wrapper {
697
- &.body--wrapper {
698
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
699
- }
700
- &.fixed-right--wrapper {
701
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
702
- }
703
- }
704
- .vxe-table--footer-wrapper {
705
- &.body--wrapper {
706
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
707
- }
708
- &.fixed-right--wrapper {
709
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
710
- }
711
- }
712
- .vxe-table--border-line {
713
- border-radius: 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0;
714
- }
715
- }
716
- }
717
- &.not--scroll-y {
718
- &.is--scroll-x {
719
- .vxe-table--header-wrapper {
720
- &.body--wrapper {
721
- border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
722
- }
723
- &.fixed-left--wrapper {
724
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
725
- }
726
- &.fixed-right--wrapper {
727
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
728
- }
729
- }
730
- .vxe-table--border-line {
731
- border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
732
- }
733
- }
734
- &.not--scroll-x {
735
- .vxe-table--header-wrapper {
736
- &.body--wrapper {
737
- border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
738
- }
739
- &.fixed-left--wrapper {
740
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
741
- }
742
- &.fixed-right--wrapper {
743
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
744
- }
745
- }
746
- .vxe-table--footer-wrapper {
747
- &.body--wrapper {
748
- border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
749
- }
750
- &.fixed-left--wrapper {
751
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
752
- }
753
- &.fixed-right--wrapper {
754
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
755
- }
756
- }
757
- .vxe-table--border-line {
758
- @extend %AllRadius;
759
- }
760
- }
761
- }
762
- }
763
- &.sx-pos--top {
764
- &.is--scroll-y {
765
- &.is--scroll-x {
766
- .vxe-table--footer-wrapper {
767
- &.body--wrapper {
768
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
769
- }
770
- &.fixed-right--wrapper {
771
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
772
- }
773
- }
774
- .vxe-table--border-line {
775
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
776
- }
777
- }
778
- &.not--scroll-x {
779
- .vxe-table--header-wrapper {
780
- &.body--wrapper {
781
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
782
- }
783
- &.fixed-right--wrapper {
784
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
785
- }
786
- }
787
- .vxe-table--footer-wrapper {
788
- &.body--wrapper {
789
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
790
- }
791
- &.fixed-right--wrapper {
792
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
793
- }
794
- }
795
- .vxe-table--border-line {
796
- border-radius: 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0;
797
- }
798
- }
799
- }
800
- &.not--scroll-y {
801
- &.is--scroll-x {
802
- .vxe-table--footer-wrapper {
803
- &.body--wrapper {
804
- border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
805
- }
806
- &.fixed-right--wrapper {
807
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
808
- }
809
- }
810
- .vxe-table--border-line {
811
- border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
812
- }
813
- }
814
- &.not--scroll-x {
815
- .vxe-table--header-wrapper {
816
- &.body--wrapper {
817
- border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
818
- }
819
- &.fixed-left--wrapper {
820
- border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
821
- }
822
- &.fixed-right--wrapper {
823
- border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
824
- }
825
- }
826
- .vxe-table--footer-wrapper {
827
- &.body--wrapper {
828
- border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
829
- }
830
- &.fixed-left--wrapper {
831
- border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
832
- }
833
- &.fixed-right--wrapper {
834
- border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
835
- }
836
- }
837
- .vxe-table--border-line {
838
- @extend %AllRadius;
839
- }
840
- }
841
- }
842
- }
843
- }
844
- }
845
- }
846
-
847
- /*列宽*/
848
- .vxe-table {
849
- &[data-calc-col] {
850
- .vxe-header--column,
851
- .vxe-body--column,
852
- .vxe-footer--column {
853
- .vxe-cell {
854
- & > .vxe-cell--wrapper {
855
- word-break: break-all;
856
- white-space: nowrap;
857
- }
858
- }
859
- }
860
- }
861
- &:not([data-calc-col]) {
862
- .vxe-cell--wrapper {
863
- min-width: 100%;
864
- }
865
- }
866
- }
867
-
868
- /*scroll*/
869
- .vxe-table {
870
- &.is--loading {
871
- & > .vxe-table--scroll-x-virtual {
872
- visibility: hidden;
873
- }
874
- & > .vxe-table--layout-wrapper {
875
- & > .vxe-table--scroll-y-virtual {
876
- visibility: hidden;
877
- }
878
- }
879
- }
880
- .vxe-table--scroll-x-virtual {
881
- height: 0;
882
- }
883
- .vxe-table--scroll-y-virtual {
884
- width: 0;
885
- }
886
- .vxe-table--scroll-x-virtual,
887
- .vxe-table--scroll-y-virtual {
888
- visibility: hidden;
889
- position: relative;
890
- flex-shrink: 0;
891
- z-index: 7;
892
- }
893
- .vxe-table--scroll-x-handle,
894
- .vxe-table--scroll-y-handle,
895
- .vxe-table--scroll-x-wrapper,
896
- .vxe-table--scroll-y-wrapper,
897
- .vxe-table--scroll-y-top-corner,
898
- .vxe-table--scroll-y-bottom-corner,
899
- .vxe-table--scroll-x-left-corner,
900
- .vxe-table--scroll-x-right-corner {
901
- position: absolute;
902
- }
903
- .vxe-table--scroll-x-handle,
904
- .vxe-table--scroll-x-wrapper {
905
- width: 100%;
906
- left: 0;
907
- bottom: 0;
908
- }
909
- .vxe-table--scroll-x-wrapper {
910
- height: 100%;
911
- }
912
- .vxe-table--scroll-x-handle {
913
- overflow-y: hidden;
914
- overflow-x: scroll;
915
- height: var(--vxe-ui-table-view-scrollbar-height);
916
- }
917
- .vxe-table--scroll-y-handle,
918
- .vxe-table--scroll-y-wrapper {
919
- width: 100%;
920
- height: 100%;
921
- right: 0;
922
- top: 0;
923
- }
924
- .vxe-table--scroll-y-handle {
925
- overflow-y: scroll;
926
- overflow-x: hidden;
927
- width: var(--vxe-ui-table-view-scrollbar-width);
928
- height: 100%;
929
- }
930
- .vxe-table--scroll-x-space {
931
- height: 1px;
932
- }
933
- .vxe-table--scroll-y-space {
934
- width: 1px;
935
- }
936
- .vxe-table--scroll-x-left-corner,
937
- .vxe-table--scroll-x-right-corner,
938
- .vxe-table--scroll-y-top-corner,
939
- .vxe-table--scroll-y-bottom-corner {
940
- display: none;
941
- position: absolute;
942
- }
943
- .vxe-table--scroll-x-left-corner,
944
- .vxe-table--scroll-x-right-corner {
945
- bottom: 0;
946
- width: 0;
947
- height: 100%;
948
- &::before {
949
- content: "";
950
- position: absolute;
951
- top: 0;
952
- left: 0;
953
- width: calc(100% + var(--vxe-ui-table-border-width));
954
- height: 100%;
955
- z-index: 1;
956
- border-width: var(--vxe-ui-table-border-width);
957
- border-style: solid;
958
- border-color: var(--vxe-ui-table-border-color);
959
- }
960
- }
961
- .vxe-table--scroll-x-left-corner {
962
- left: 0;
963
- }
964
- .vxe-table--scroll-x-right-corner {
965
- right: 0;
966
- }
967
- &.sy-pos--right {
968
- .vxe-table--scroll-y-top-corner,
969
- .vxe-table--scroll-y-bottom-corner {
970
- right: 0;
971
- width: calc(100% + var(--vxe-ui-table-border-width));
972
- }
973
- .vxe-table--scroll-x-right-corner {
974
- &::before {
975
- left: calc(var(--vxe-ui-table-border-width) * -1);
976
- }
977
- }
978
- .vxe-table--scroll-x-right-corner {
979
- &::before {
980
- border-right: 0;
981
- }
982
- }
983
- }
984
- &.sy-pos--left {
985
- .vxe-table--scroll-y-top-corner,
986
- .vxe-table--scroll-y-bottom-corner {
987
- left: 0;
988
- width: calc(100% + var(--vxe-ui-table-border-width));
989
- }
990
- .vxe-table--scroll-x-left-corner {
991
- &::before {
992
- top: calc(var(--vxe-ui-table-border-width) * -1);
993
- height: calc(100% + var(--vxe-ui-table-border-width));
994
- }
995
- }
996
- }
997
- &.sx-pos--bottom {
998
- .vxe-table--scroll-x-right-corner {
999
- bottom: var(--vxe-ui-table-border-width);
1000
- &::before {
1001
- border-bottom: 0;
1002
- }
1003
- }
1004
- }
1005
- .vxe-table--scroll-y-top-corner {
1006
- background-color: var(--vxe-ui-table-header-background-color);
1007
- }
1008
- .vxe-table--scroll-y-top-corner,
1009
- .vxe-table--scroll-y-bottom-corner {
1010
- top: 0;
1011
- height: 0;
1012
- }
1013
- .vxe-table--scroll-y-bottom-corner {
1014
- margin-top: calc(var(--vxe-ui-table-border-width) * -1);
1015
- }
1016
- }
1017
-
1018
- /*header*/
1019
- .vxe-table {
1020
- .vxe-table--header-wrapper {
1021
- color: var(--vxe-ui-table-header-font-color);
1022
- }
1023
- /*排序*/
1024
- .vxe-cell--sort {
1025
- text-align: center;
1026
- position: relative;
1027
- padding: 0 0.1em 0 0.2em;
1028
- }
1029
- .vxe-cell--sort-vertical-layout {
1030
- display: inline-flex;
1031
- flex-direction: column;
1032
- height: 1.8em;
1033
- vertical-align: middle;
1034
- .vxe-sort--asc-btn,
1035
- .vxe-sort--desc-btn {
1036
- height: 0.6em;
1037
- }
1038
- }
1039
- .vxe-cell--sort-horizontal-layout {
1040
- display: inline-flex;
1041
- flex-direction: row;
1042
- .vxe-sort--asc-btn,
1043
- .vxe-sort--desc-btn {
1044
- width: 0.5em;
1045
- }
1046
- }
1047
- .vxe-sort--asc-btn,
1048
- .vxe-sort--desc-btn {
1049
- color: var(--vxe-ui-table-column-icon-border-color);
1050
- cursor: pointer;
1051
- &:hover {
1052
- color: var(--vxe-ui-font-color);
1053
- }
1054
- &.sort--active {
1055
- color: var(--vxe-ui-font-primary-color);
1056
- }
1057
- }
1058
- }
1059
-
1060
- .vxe-sort--asc-btn,
1061
- .vxe-sort--desc-btn,
1062
- .vxe-filter--btn {
1063
- &:before,
1064
- &:after {
1065
- @include baseMixin.createAnimationTransition(border);
1066
- }
1067
- }
1068
-
1069
- .vxe-header--column {
1070
- position: relative;
1071
- font-weight: var(--vxe-ui-table-header-font-weight);
1072
- // user-select: none;
1073
- &.col--ellipsis {
1074
- & > .vxe-cell {
1075
- .vxe-cell--wrapper {
1076
- display: flex;
1077
- align-items: center;
1078
- .vxe-cell--drag-handle,
1079
- .vxe-cell--sort,
1080
- .vxe-cell--filter,
1081
- .vxe-cell-title-prefix-icon,
1082
- .vxe-cell-title-suffix-icon,
1083
- .vxe-cell--checkbox,
1084
- .vxe-cell-title-suffix-icon,
1085
- .vxe-cell--required-icon {
1086
- flex-shrink: 0;
1087
- }
1088
- }
1089
- .vxe-cell--title {
1090
- overflow: hidden;
1091
- text-overflow: ellipsis;
1092
- white-space: nowrap;
1093
- }
1094
- }
1095
- }
1096
- .vxe-cell--required-icon {
1097
- display: inline-block;
1098
- color: var(--vxe-ui-table-validate-error-color);
1099
- width: 0.8em;
1100
- height: 1em;
1101
- line-height: 1em;
1102
- position: relative;
1103
- & > i {
1104
- font-family: Verdana,Arial,Tahoma;
1105
- font-weight: normal;
1106
- &:before {
1107
- content: "*";
1108
- position: absolute;
1109
- left: 0;
1110
- top: 0.2em;
1111
- }
1112
- }
1113
- }
1114
- // .vxe-cell--required-icon,
1115
- // .vxe-cell--edit-icon,
1116
- // .vxe-cell-title-prefix-icon,
1117
- // .vxe-cell-title-suffix-icon,
1118
- // .vxe-cell--title {
1119
- // vertical-align: middle;
1120
- // }
1121
- .vxe-cell--required-icon {
1122
- padding-right: 0.1em;
1123
- }
1124
- .vxe-cell--edit-icon,
1125
- .vxe-cell-title-prefix-icon,
1126
- .vxe-cell-title-suffix-icon {
1127
- padding: 0.2em;
1128
- }
1129
- .vxe-cell-title-prefix-icon,
1130
- .vxe-cell-title-suffix-icon {
1131
- @for $index from 0 to list.length($btnThemeList) {
1132
- $item: list.nth($btnThemeList, $index + 1);
1133
- &.theme--#{map.get($item, name)} {
1134
- color: map.get($item, textColor);
1135
- }
1136
- }
1137
- }
1138
- }
1139
-
1140
- .vxe-cell--col-resizable {
1141
- position: absolute;
1142
- right: -0.3em;
1143
- bottom: 0;
1144
- width: 0.6em;
1145
- height: 100%;
1146
- text-align: center;
1147
- z-index: 1;
1148
- cursor: col-resize;
1149
- &.is--line {
1150
- &:before,
1151
- &:after {
1152
- content: "";
1153
- display: inline-block;
1154
- vertical-align: middle;
1155
- }
1156
- &:before {
1157
- width: 1px;
1158
- height: 50%;
1159
- background-color: var(--vxe-ui-table-resizable-line-color);
1160
- }
1161
- &:after {
1162
- width: 0;
1163
- height: 100%;
1164
- }
1165
- }
1166
- }
1167
- .vxe-header--column {
1168
- &:last-child {
1169
- & > .vxe-cell--col-resizable {
1170
- right: 0;
1171
- }
1172
- }
1173
- }
1174
- .vxe-table--fixed-right-wrapper {
1175
- .vxe-cell--col-resizable {
1176
- right: auto;
1177
- left: -0.3em;
1178
- }
1179
- }
1180
-
1181
- .vxe-body--column {
1182
- .vxe-cell--row-resizable {
1183
- position: absolute;
1184
- left: 0;
1185
- bottom: -0.4em;
1186
- height: 0.8em;
1187
- width: 100%;
1188
- text-align: center;
1189
- z-index: 1;
1190
- cursor: row-resize;
1191
- }
1192
- }
1193
- .vxe-body--row {
1194
- &:last-child {
1195
- .vxe-body--column {
1196
- .vxe-cell--row-resizable {
1197
- height: 0.4em;
1198
- bottom: -0px;
1199
- }
1200
- }
1201
- }
1202
- }
1203
-
1204
-
1205
- /*拖拽线*/
1206
- .vxe-table--resizable-row-bar,
1207
- .vxe-table--resizable-col-bar {
1208
- display: none;
1209
- position: absolute;
1210
- top: 0;
1211
- left: 0;
1212
- z-index: 13;
1213
- pointer-events: none;
1214
- user-select: none;
1215
- &:before {
1216
- content: "";
1217
- display: block;
1218
- background-color: var(--vxe-ui-table-resizable-drag-line-color);
1219
- }
1220
- .vxe-table--resizable-number-tip {
1221
- position: absolute;
1222
- padding: 0.25em 0.25em;
1223
- font-size: 12px;
1224
- border-radius: var(--vxe-ui-border-radius);
1225
- white-space: nowrap;
1226
- color: #ffffff;
1227
- background-color: var(--vxe-ui-table-resizable-drag-line-color);
1228
- user-select: none;
1229
- pointer-events: none;
1230
- }
1231
- }
1232
- /*列宽线*/
1233
- .vxe-table--resizable-col-bar {
1234
- width: 1px;
1235
- height: 100%;
1236
- cursor: col-resize;
1237
- &:before {
1238
- width: 1px;
1239
- height: 100%;
1240
- }
1241
- .vxe-table--resizable-number-tip {
1242
- left: 0;
1243
- top: 1em;
1244
- }
1245
- }
1246
- // 行高线
1247
- .vxe-table--resizable-row-bar {
1248
- height: 1px;
1249
- width: 100%;
1250
- cursor: row-resize;
1251
- &:before {
1252
- height: 1px;
1253
- width: 100%;
1254
- }
1255
- .vxe-table--resizable-number-tip {
1256
- top: 0;
1257
- left: 0;
1258
- }
1259
- }
1260
-
1261
- /*拖拽行与列*/
1262
- .vxe-table--drag-col-line,
1263
- .vxe-table--drag-row-line {
1264
- display: none;
1265
- position: absolute;
1266
- top: 0;
1267
- left: 0;
1268
- z-index: 11;
1269
- pointer-events: none;
1270
- }
1271
- .vxe-table--drag-row-line {
1272
- width: 100%;
1273
- height: 1px;
1274
- border: 2px solid transparent;
1275
- &[drag-pos="top"] {
1276
- border-top-color: var(--vxe-ui-font-primary-color);
1277
- }
1278
- &[drag-pos="bottom"] {
1279
- border-bottom-color: var(--vxe-ui-font-primary-color);
1280
- }
1281
- &[drag-to-child="y"] {
1282
- border-top-color: transparent;
1283
- border-bottom-color: transparent;
1284
- border-left-color: var(--vxe-ui-status-success-color);
1285
- }
1286
- &.is--guides {
1287
- background-color: var( --vxe-ui-table-drag-over-background-color);
1288
- }
1289
- }
1290
- .vxe-table--drag-col-line {
1291
- height: 100%;
1292
- width: 1px;
1293
- border: 2px solid transparent;
1294
- &[drag-pos="left"] {
1295
- border-left-color: var(--vxe-ui-font-primary-color);
1296
- }
1297
- &[drag-pos="right"] {
1298
- border-right-color: var(--vxe-ui-font-primary-color);
1299
- }
1300
- &[drag-to-child="y"] {
1301
- border-left-color: transparent;
1302
- border-right-color: transparent;
1303
- border-bottom-color: var(--vxe-ui-status-success-color);
1304
- }
1305
- &.is--guides {
1306
- background-color: var( --vxe-ui-table-drag-over-background-color);
1307
- }
1308
- }
1309
- .vxe-body--row-list-move {
1310
- transition-property: transform;
1311
- transition-duration: 0.35s;
1312
- }
1313
- .vxe-table--drag-sort-tip {
1314
- display: none;
1315
- position: absolute;
1316
- top: 0;
1317
- left: 0;
1318
- padding: 0.6em 1.4em;
1319
- max-width: 50%;
1320
- min-width: 100px;
1321
- border-radius: var(--vxe-ui-border-radius);
1322
- overflow: hidden;
1323
- text-overflow: ellipsis;
1324
- white-space: nowrap;
1325
- user-select: none;
1326
- pointer-events: none;
1327
- background-color: var(--vxe-ui-layout-background-color);
1328
- box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
1329
- z-index: 33;
1330
- &[drag-status="normal"] {
1331
- .vxe-table--drag-sort-tip-normal-status {
1332
- display: block;
1333
- }
1334
- }
1335
- &[drag-status="sub"] {
1336
- .vxe-table--drag-sort-tip-sub-status {
1337
- display: block;
1338
- }
1339
- }
1340
- &[drag-status="disabled"] {
1341
- .vxe-table--drag-sort-tip-disabled-status {
1342
- display: block;
1343
- }
1344
- }
1345
- }
1346
- .vxe-table--drag-sort-tip-wrapper {
1347
- display: flex;
1348
- flex-direction: row;
1349
- align-items: center;
1350
- }
1351
- .vxe-table--drag-sort-tip-status {
1352
- padding-right: 0.4em;
1353
- }
1354
- .vxe-table--drag-sort-tip-disabled-status {
1355
- display: none;
1356
- flex-shrink: 0;
1357
- color: var(--vxe-ui-status-error-color)
1358
- }
1359
- .vxe-table--drag-sort-tip-normal-status,
1360
- .vxe-table--drag-sort-tip-sub-status {
1361
- display: none;
1362
- }
1363
- .vxe-table--drag-sort-tip-content {
1364
- flex-grow: 1;
1365
- overflow: hidden;
1366
- text-overflow: ellipsis;
1367
- white-space: nowrap;
1368
- }
1369
-
1370
- /*table*/
1371
- .vxe-table--render-default {
1372
- position: relative;
1373
- font-size: var(--vxe-ui-font-size-default);
1374
- color: var(--vxe-ui-font-color);
1375
- font-family: var(--vxe-ui-font-family);
1376
- direction: ltr;
1377
- .vxe-table--body-wrapper {
1378
- background-color: var(--vxe-ui-layout-background-color);
1379
- }
1380
- .vxe-table--footer-wrapper {
1381
- margin-top: calc(var(--vxe-ui-table-border-width) * -1);
1382
- background-color: var(--vxe-ui-table-footer-background-color);
1383
- }
1384
- .vxe-table--header,
1385
- .vxe-table--body,
1386
- .vxe-table--footer {
1387
- border: 0;
1388
- border-spacing: 0;
1389
- border-collapse: separate;
1390
- table-layout: fixed;
1391
- }
1392
- &:not(.is--empty) {
1393
- &.is--footer {
1394
- &.is--scroll-x {
1395
- .vxe-table--body-wrapper {
1396
- outline: 0;
1397
- }
1398
- }
1399
- }
1400
- }
1401
- &.col-drag--resize {
1402
- .vxe-table--main-wrapper,
1403
- .vxe-table--fixed-left-wrapper,
1404
- .vxe-table--fixed-right-wrapper {
1405
- * {
1406
- cursor: col-resize;
1407
- }
1408
- }
1409
- }
1410
- &.row-drag--resize {
1411
- .vxe-table--main-wrapper,
1412
- .vxe-table--fixed-left-wrapper,
1413
- .vxe-table--fixed-right-wrapper {
1414
- * {
1415
- cursor: row-resize;
1416
- }
1417
- }
1418
- }
1419
- &.drag--range,
1420
- &.drag--area {
1421
- .vxe-table--main-wrapper,
1422
- .vxe-table--fixed-left-wrapper,
1423
- .vxe-table--fixed-right-wrapper {
1424
- * {
1425
- cursor: default;
1426
- }
1427
- }
1428
- }
1429
- &.drag--extend-range {
1430
- .vxe-table--main-wrapper,
1431
- .vxe-table--fixed-left-wrapper,
1432
- .vxe-table--fixed-right-wrapper {
1433
- * {
1434
- cursor: crosshair;
1435
- }
1436
- }
1437
- }
1438
- &.col--drag-cell {
1439
- .vxe-header--column {
1440
- user-select: none;
1441
- &.is--drag-active {
1442
- cursor: grab;
1443
- &:active {
1444
- cursor: grabbing;
1445
- }
1446
- &:hover {
1447
- color: var(--vxe-ui-font-primary-color);
1448
- }
1449
- }
1450
- &.is--drag-disabled {
1451
- color: var(--vxe-ui-input-disabled-color);
1452
- cursor: not-allowed;
1453
- }
1454
- }
1455
- }
1456
- &.header-cell--area {
1457
- .vxe-table--header-wrapper {
1458
- user-select: none;
1459
- }
1460
- }
1461
- &.body-cell--area {
1462
- .vxe-table--body-wrapper {
1463
- user-select: none;
1464
- }
1465
- }
1466
- &.drag--range {
1467
- .vxe-body--column {
1468
- user-select: none;
1469
- }
1470
- }
1471
- &.checkbox--range {
1472
- .vxe-body--column {
1473
- &.col--checkbox {
1474
- user-select: none;
1475
- }
1476
- }
1477
- }
1478
- .vxe-header--column,
1479
- .vxe-body--column,
1480
- .vxe-footer--column {
1481
- position: relative;
1482
- line-height: var(--vxe-ui-table-row-line-height);
1483
- text-align: left;
1484
- &.col--center {
1485
- text-align: center;
1486
- & > .vxe-cell {
1487
- justify-content: center;
1488
- }
1489
- }
1490
- &.col--right {
1491
- text-align: right;
1492
- & > .vxe-cell {
1493
- justify-content: right;
1494
- }
1495
- }
1496
- }
1497
- .vxe-header--column {
1498
- &.col--ellipsis {
1499
- &.col--center {
1500
- .vxe-cell--wrapper {
1501
- justify-content: center;
1502
- }
1503
- }
1504
- &.col--right {
1505
- .vxe-cell--wrapper {
1506
- justify-content: right;
1507
- }
1508
- }
1509
- }
1510
- }
1511
- .vxe-header--column,
1512
- .vxe-footer--column {
1513
- &.col--ellipsis {
1514
- &.col--center {
1515
- .vxe-cell{
1516
- justify-content: center;
1517
- }
1518
- }
1519
- &.col--right {
1520
- .vxe-cell{
1521
- justify-content: flex-end;
1522
- }
1523
- }
1524
- }
1525
- }
1526
-
1527
- // 行高亮
1528
- .vxe-body--row {
1529
- &.row--stripe {
1530
- & > .vxe-body--column {
1531
- background-color: var(--vxe-ui-table-row-striped-background-color);
1532
- }
1533
- }
1534
- }
1535
-
1536
- // 列高亮
1537
- &.column--highlight {
1538
- .vxe-header--column {
1539
- &:hover {
1540
- background-color: var(--vxe-ui-table-column-hover-background-color);
1541
- &.col--current {
1542
- background-color: var(--vxe-ui-table-column-hover-current-background-color);
1543
- }
1544
- }
1545
- }
1546
- }
1547
- .vxe-header--column,
1548
- .vxe-body--column,
1549
- .vxe-footer--column {
1550
- position: relative;
1551
- line-height: var(--vxe-ui-table-row-line-height);
1552
- text-align: left;
1553
- &.col--current {
1554
- background-color: var(--vxe-ui-table-column-current-background-color);
1555
- // .vxe-cell--tree-btn {
1556
- // background-color: var(--vxe-ui-table-column-current-background-color);
1557
- // }
1558
- }
1559
- }
1560
- // &.is--tree-line {
1561
- // .vxe-header--column,
1562
- // .vxe-body--column,
1563
- // .vxe-footer--column {
1564
- // &.col--current {
1565
- // .vxe-cell--tree-btn {
1566
- // background-color: var(--vxe-ui-table-column-current-background-color);
1567
- // }
1568
- // }
1569
- // }
1570
- // }
1571
-
1572
- // 行高亮
1573
- .vxe-body--row {
1574
- &.row--radio {
1575
- & > .vxe-body--column {
1576
- background-color: var(--vxe-ui-table-row-radio-checked-background-color);
1577
- }
1578
- }
1579
- &.row--checked {
1580
- & > .vxe-body--column {
1581
- background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
1582
- }
1583
- }
1584
- &.row--current {
1585
- & > .vxe-body--column {
1586
- background-color: var(--vxe-ui-table-row-current-background-color);
1587
- }
1588
- }
1589
- &.row--hover {
1590
- & > .vxe-body--column {
1591
- background-color: var(--vxe-ui-table-row-hover-background-color);
1592
- &.col--current {
1593
- background-color: var(--vxe-ui-table-column-current-background-color);
1594
- }
1595
- }
1596
- &.row--stripe {
1597
- & > .vxe-body--column {
1598
- background-color: var(--vxe-ui-table-row-hover-striped-background-color);
1599
- }
1600
- }
1601
- &.row--radio {
1602
- & > .vxe-body--column {
1603
- background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
1604
- }
1605
- }
1606
- &.row--checked {
1607
- & > .vxe-body--column {
1608
- background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
1609
- }
1610
- }
1611
- &.row--current {
1612
- & > .vxe-body--column {
1613
- background-color: var(--vxe-ui-table-row-hover-current-background-color);
1614
- }
1615
- }
1616
- }
1617
- }
1618
- // &.is--tree-line {
1619
- // .vxe-body--row {
1620
- // &.row--stripe {
1621
- // .vxe-cell--tree-btn {
1622
- // background-color: var(--vxe-ui-table-row-striped-background-color);
1623
- // }
1624
- // }
1625
- // &.row--radio {
1626
- // .vxe-cell--tree-btn {
1627
- // background-color: var(--vxe-ui-table-row-radio-checked-background-color);
1628
- // }
1629
- // }
1630
- // &.row--checked {
1631
- // .vxe-cell--tree-btn {
1632
- // background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
1633
- // }
1634
- // }
1635
- // &.row--current {
1636
- // .vxe-cell--tree-btn {
1637
- // background-color: var(--vxe-ui-table-row-current-background-color);
1638
- // }
1639
- // }
1640
- // &.row--hover {
1641
- // .vxe-cell--tree-btn {
1642
- // background-color: var(--vxe-ui-table-row-hover-background-color);
1643
- // }
1644
- // &.row--stripe {
1645
- // .vxe-cell--tree-btn {
1646
- // background-color: var(--vxe-ui-table-row-hover-striped-background-color);
1647
- // }
1648
- // }
1649
- // &.row--radio {
1650
- // .vxe-cell--tree-btn {
1651
- // background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
1652
- // }
1653
- // }
1654
- // &.row--checked {
1655
- // .vxe-cell--tree-btn {
1656
- // background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
1657
- // }
1658
- // }
1659
- // &.row--current {
1660
- // .vxe-cell--tree-btn {
1661
- // background-color: var(--vxe-ui-table-row-hover-current-background-color);
1662
- // }
1663
- // }
1664
- // }
1665
- // }
1666
- // }
1667
-
1668
- /*边框*/
1669
- &.border--default,
1670
- &.border--full,
1671
- &.border--outer,
1672
- &.border--inner {
1673
- &.sy-pos--right {
1674
- .vxe-table--scroll-y-top-corner {
1675
- background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1676
- background-repeat: no-repeat;
1677
- background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1678
- background-position: left top, left bottom;
1679
- }
1680
- .vxe-table--scroll-y-bottom-corner {
1681
- background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1682
- background-repeat: no-repeat;
1683
- background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1684
- background-position: left top, left top;
1685
- }
1686
- }
1687
- &.sy-pos--left {
1688
- .vxe-table--scroll-y-top-corner {
1689
- background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1690
- background-repeat: no-repeat;
1691
- background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1692
- background-position: right top, left bottom;
1693
- }
1694
- .vxe-table--scroll-y-bottom-corner {
1695
- background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1696
- background-repeat: no-repeat;
1697
- background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1698
- background-position: right top, left top;
1699
- }
1700
- }
1701
- .vxe-table--scroll-x-handle-appearance {
1702
- position: absolute;
1703
- left: 0;
1704
- width: 100%;
1705
- height: 100%;
1706
- z-index: 1;
1707
- pointer-events: none;
1708
- }
1709
- &.sx-pos--top {
1710
- .vxe-table--scroll-x-handle-appearance {
1711
- top: 0;
1712
- border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1713
- }
1714
- }
1715
- &.sx-pos--bottom {
1716
- .vxe-table--scroll-x-handle-appearance {
1717
- bottom: 0;
1718
- height: calc(100% + var(--vxe-ui-table-border-width));
1719
- border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1720
- }
1721
- }
1722
- }
1723
- &.border--default,
1724
- &.border--none,
1725
- &.border--outer,
1726
- &.border--inner {
1727
- .vxe-cell--col-resizable {
1728
- &:before,
1729
- &:after {
1730
- content: "";
1731
- display: inline-block;
1732
- vertical-align: middle;
1733
- }
1734
- &:before {
1735
- width: 1px;
1736
- height: 50%;
1737
- background-color: var(--vxe-ui-table-resizable-line-color);
1738
- }
1739
- &:after {
1740
- width: 0;
1741
- height: 100%;
1742
- }
1743
- }
1744
- }
1745
- &.border--default,
1746
- &.border--full,
1747
- &.border--outer {
1748
- .vxe-table--header-wrapper {
1749
- background-color: var(--vxe-ui-table-header-background-color);
1750
- }
1751
- }
1752
- &.border--default,
1753
- &.border--inner {
1754
- .vxe-header--column,
1755
- .vxe-body--column,
1756
- .vxe-footer--column {
1757
- background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1758
- background-repeat: no-repeat;
1759
- background-size: 100% var(--vxe-ui-table-border-width);
1760
- background-position: right bottom;
1761
- }
1762
- }
1763
- &.border--default,
1764
- &.border--full,
1765
- &.border--inner {
1766
- .vxe-table--footer-wrapper {
1767
- border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1768
- }
1769
- }
1770
- &.border--default,
1771
- &.border--full {
1772
- .vxe-table--scroll-y-handle-appearance {
1773
- position: absolute;
1774
- top: 0;
1775
- width: 100%;
1776
- height: 100%;
1777
- z-index: 1;
1778
- pointer-events: none;
1779
- }
1780
- &.sy-pos--left {
1781
- .vxe-table--scroll-y-handle-appearance {
1782
- left: 0;
1783
- border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1784
- }
1785
- }
1786
- &.sy-pos--right {
1787
- .vxe-table--scroll-y-handle-appearance {
1788
- right: 0;
1789
- width: calc(100% + var(--vxe-ui-table-border-width));
1790
- border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1791
- }
1792
- }
1793
- }
1794
- &.border--full {
1795
- .vxe-header--column,
1796
- .vxe-body--column,
1797
- .vxe-footer--column {
1798
- background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1799
- background-repeat: no-repeat;
1800
- background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1801
- background-position: right top, right bottom;
1802
- }
1803
- .vxe-table--fixed-left-wrapper {
1804
- // border-right: 1px solid var(--vxe-ui-table-border-color);
1805
- .vxe-body--column{
1806
- border-right-color: var(--vxe-ui-table-border-color);
1807
- }
1808
- }
1809
- }
1810
- &.border--inner,
1811
- &.border--none {
1812
- .vxe-table--header-wrapper {
1813
- background-color: var(--vxe-ui-table-header-background-color);
1814
- }
1815
- .vxe-table--fixed-left-wrapper {
1816
- border-right: 0;
1817
- }
1818
- }
1819
- &.border--inner {
1820
- .vxe-table--border-line {
1821
- border-width: 0 0 1px 0;
1822
- }
1823
- }
1824
- &.border--none {
1825
- .vxe-table--border-line {
1826
- display: none;
1827
- }
1828
- }
1829
-
1830
- &.size--medium {
1831
- font-size: var(--vxe-ui-font-size-medium);
1832
- .vxe-table--empty-placeholder,
1833
- .vxe-table--empty-block {
1834
- min-height: var(--vxe-ui-table-row-height-medium);
1835
- }
1836
- .vxe-header--column,
1837
- .vxe-body--column,
1838
- .vxe-footer--column {
1839
- &.is--padding {
1840
- .vxe-cell {
1841
- padding: var(--vxe-ui-table-cell-padding-medium);
1842
- .vxe-default-textarea {
1843
- padding: var(--vxe-ui-table-cell-padding-medium);
1844
- }
1845
- }
1846
- }
1847
- }
1848
- .vxe-cell {
1849
- .vxe-default-input,
1850
- .vxe-default-textarea,
1851
- .vxe-default-select {
1852
- height: var(--vxe-ui-input-height-medium);
1853
- }
1854
- .vxe-default-input {
1855
- &[type="date"]::-webkit-inner-spin-button {
1856
- margin-top: 3px;
1857
- }
1858
- }
1859
- }
1860
- .vxe-cell--valid-error-tip {
1861
- padding: 0 var(--vxe-ui-table-cell-padding-medium);
1862
- }
1863
- }
1864
- &.size--small {
1865
- font-size: var(--vxe-ui-font-size-small);
1866
- .vxe-table--empty-placeholder,
1867
- .vxe-table--empty-block {
1868
- min-height: var(--vxe-ui-table-row-height-small);
1869
- }
1870
- .vxe-header--column,
1871
- .vxe-body--column,
1872
- .vxe-footer--column {
1873
- &.is--padding {
1874
- .vxe-cell {
1875
- padding: var(--vxe-ui-table-cell-padding-small);
1876
- .vxe-default-textarea {
1877
- padding: var(--vxe-ui-table-cell-padding-small);
1878
- }
1879
- }
1880
- }
1881
- }
1882
- .vxe-cell {
1883
- .vxe-default-input,
1884
- .vxe-default-textarea,
1885
- .vxe-default-select {
1886
- height: var(--vxe-ui-input-height-small);
1887
- }
1888
- .vxe-default-input {
1889
- &[type="date"]::-webkit-inner-spin-button {
1890
- margin-top: 2px;
1891
- }
1892
- }
1893
- }
1894
- .vxe-cell--valid-error-tip {
1895
- padding: 0 var(--vxe-ui-table-cell-padding-small);
1896
- }
1897
- }
1898
- &.size--mini {
1899
- font-size: var(--vxe-ui-font-size-mini);
1900
- .vxe-table--empty-placeholder,
1901
- .vxe-table--empty-block {
1902
- min-height: var(--vxe-ui-table-row-height-mini);
1903
- }
1904
- .vxe-header--column,
1905
- .vxe-body--column,
1906
- .vxe-footer--column {
1907
- &.is--padding {
1908
- .vxe-cell {
1909
- padding: var(--vxe-ui-table-cell-padding-mini);
1910
- .vxe-default-textarea {
1911
- padding: var(--vxe-ui-table-cell-padding-mini);
1912
- }
1913
- }
1914
- }
1915
- }
1916
- .vxe-cell {
1917
- .vxe-default-input,
1918
- .vxe-default-textarea,
1919
- .vxe-default-select {
1920
- height: var(--vxe-ui-input-height-mini);
1921
- }
1922
- .vxe-default-input {
1923
- &[type="date"]::-webkit-inner-spin-button {
1924
- margin-top: 1px;
1925
- }
1926
- }
1927
- }
1928
- .vxe-cell--valid-error-tip {
1929
- padding: 0 var(--vxe-ui-table-cell-padding-mini);
1930
- }
1931
- }
1932
-
1933
- .vxe-header--column,
1934
- .vxe-body--column,
1935
- .vxe-footer--column {
1936
- &.is--padding {
1937
- .vxe-cell {
1938
- padding: var(--vxe-ui-table-cell-padding-default);
1939
- .vxe-default-textarea {
1940
- padding: var(--vxe-ui-table-cell-padding-default);
1941
- }
1942
- }
1943
- }
1944
- }
1945
-
1946
- .vxe-cell {
1947
- white-space: pre-line;
1948
- word-break: break-all;
1949
- }
1950
-
1951
- // 单元格占位符
1952
- .vxe-cell--placeholder {
1953
- color: var(--vxe-ui-table-cell-placeholder-color);
1954
- }
1955
-
1956
- // 单选框和复选框
1957
- .vxe-cell--radio {
1958
- @include baseMixin.createRadioIcon();
1959
- }
1960
- .vxe-cell--checkbox {
1961
- @include baseMixin.createCheckboxIcon();
1962
- }
1963
-
1964
- .fixed--hidden {
1965
- visibility: hidden;
1966
- }
1967
- .vxe-table--fixed-left-wrapper,
1968
- .vxe-table--fixed-right-wrapper {
1969
- width: 100%;
1970
- position: absolute;
1971
- top: 0;
1972
- z-index: 5;
1973
- overflow: hidden;
1974
- background-color: inherit;
1975
- transition: 0.3s box-shadow;
1976
- outline: 0;
1977
- background-color: var(--vxe-ui-layout-background-color);
1978
- &.y-ob--contain {
1979
- & > .vxe-table--body-wrapper {
1980
- & > .vxe-table--body-inner-wrapper {
1981
- overscroll-behavior-y: contain;
1982
- }
1983
- }
1984
- }
1985
- .vxe-table--body-wrapper {
1986
- outline: 0;
1987
- }
1988
- }
1989
- .vxe-table--fixed-left-wrapper {
1990
- .vxe-table--body-wrapper {
1991
- width: calc(100% + 40px);
1992
- }
1993
- }
1994
- &.is--header {
1995
- .vxe-table--fixed-left-wrapper,
1996
- .vxe-table--fixed-right-wrapper {
1997
- .vxe-table--body-wrapper {
1998
- &:before {
1999
- display: none;
2000
- }
2001
- }
2002
- }
2003
- }
2004
- .vxe-table--fixed-left-wrapper {
2005
- left: 0;
2006
- width: 200px;
2007
- &.scrolling--middle {
2008
- box-shadow: var(--vxe-ui-table-fixed-left-scrolling-box-shadow);
2009
- }
2010
- }
2011
- .vxe-table--fixed-right-wrapper {
2012
- right: 0;
2013
- &.scrolling--middle {
2014
- box-shadow: var(--vxe-ui-table-fixed-right-scrolling-box-shadow);
2015
- }
2016
- }
2017
- .vxe-table--header-wrapper,
2018
- .vxe-table--body-wrapper,
2019
- .vxe-table--footer-wrapper {
2020
- position: relative;
2021
- width: 100%;
2022
- &.fixed-left--wrapper,
2023
- &.fixed-right--wrapper {
2024
- position: absolute;
2025
- top: 0;
2026
- outline: 0;
2027
- }
2028
- &.fixed-left--wrapper {
2029
- left: 0;
2030
- }
2031
- &.fixed-right--wrapper {
2032
- right: 0;
2033
- }
2034
- }
2035
- .vxe-body--x-space {
2036
- width: 100%;
2037
- height: 1px;
2038
- margin-bottom: -1px;
2039
- }
2040
- .vxe-body--y-space {
2041
- width: 0;
2042
- float: left;
2043
- }
2044
-
2045
- /*边框线*/
2046
- .vxe-table--border-line {
2047
- position: absolute;
2048
- top: 0;
2049
- left: 0;
2050
- width: 100%;
2051
- height: 100%;
2052
- z-index: 10;
2053
- pointer-events: none;
2054
- border: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2055
- }
2056
-
2057
- /*树形节点*/
2058
- // &.is--tree-line {
2059
- // .vxe-body--row {
2060
- // &:first-child {
2061
- // .vxe-tree--line {
2062
- // border-width: 0 0 1px 0;
2063
- // }
2064
- // }
2065
- // }
2066
- // .vxe-body--row {
2067
- // .vxe-body--column {
2068
- // background-image: none;
2069
- // }
2070
- // }
2071
- // }
2072
- .vxe-tree--line-wrapper {
2073
- position: relative;
2074
- display: block;
2075
- height: 0;
2076
- }
2077
- .vxe-tree--line {
2078
- content: "";
2079
- position: absolute;
2080
- bottom: -1.5em;
2081
- width: 0.8em;
2082
- border-width: 0 0 1px 1px;
2083
- border-style: var(--vxe-ui-table-tree-node-line-style);
2084
- border-color: var(--vxe-ui-table-tree-node-line-color);
2085
- pointer-events: none;
2086
- }
2087
- .vxe-row-group--tree-node,
2088
- .vxe-cell--tree-node {
2089
- position: relative;
2090
- }
2091
- .vxe-cell--tree-btn {
2092
- &:hover {
2093
- color: var(--vxe-ui-font-color);
2094
- }
2095
- & > i {
2096
- display: block;
2097
- color: var(--vxe-ui-font-lighten-color);
2098
- @include baseMixin.createAnimationTransition(transform);
2099
- // background-color: var(--vxe-ui-layout-background-color); // 影响选择行相关
2100
- }
2101
- }
2102
- .vxe-row-group-cell,
2103
- .vxe-tree-cell {
2104
- display: block;
2105
- padding-left: 1.5em;
2106
- }
2107
- .vxe-cell--tree-btn,
2108
- .vxe-row-group--node-btn{
2109
- position: absolute;
2110
- top: 50%;
2111
- width: 1em;
2112
- height: 1em;
2113
- text-align: center;
2114
- transform: translateY(-50%);
2115
- z-index: 1;
2116
- user-select: none;
2117
- cursor: pointer;
2118
- }
2119
-
2120
- /*行分组*/
2121
- .vxe-row-group--node-btn {
2122
- &:hover {
2123
- color: var(--vxe-ui-font-color);
2124
- }
2125
- & > i {
2126
- display: block;
2127
- color: var(--vxe-ui-font-lighten-color);
2128
- @include baseMixin.createAnimationTransition(transform);
2129
- }
2130
- }
2131
-
2132
- /*单元格高度*/
2133
- .vxe-body--column {
2134
- &.col--ellipsis {
2135
- & > .vxe-cell {
2136
- .vxe-row-group-cell,
2137
- .vxe-tree-cell {
2138
- overflow: hidden;
2139
- text-overflow: ellipsis;
2140
- white-space: nowrap;
2141
- }
2142
- }
2143
- }
2144
- &.col--cs-height,
2145
- &.col--rs-height,
2146
- &.col--auto-height {
2147
- overflow: hidden;
2148
- &.col--tree-node,
2149
- &.col--valid-error {
2150
- overflow: unset;
2151
- }
2152
- & > .vxe-cell {
2153
- overflow: hidden;
2154
- }
2155
- }
2156
- & > .vxe-cell {
2157
- display: flex;
2158
- flex-direction: row;
2159
- align-items: center;
2160
- }
2161
- }
2162
- /*溢出列*/
2163
- .vxe-header--column,
2164
- .vxe-body--column,
2165
- .vxe-footer--column {
2166
- &:not(.col--active) {
2167
- &.col--ellipsis {
2168
- & > .vxe-cell {
2169
- overflow: hidden;
2170
- & > .vxe-cell--wrapper {
2171
- overflow: hidden;
2172
- text-overflow: ellipsis;
2173
- white-space: nowrap;
2174
- }
2175
- }
2176
- }
2177
- &.vxe-row-group-cell,
2178
- &.vxe-tree-cell,
2179
- &.col--vertical-top {
2180
- & > .vxe-cell {
2181
- & > .vxe-cell--wrapper {
2182
- white-space: pre-line;
2183
- }
2184
- }
2185
- }
2186
- }
2187
- }
2188
- .vxe-header--column,
2189
- .vxe-footer--column {
2190
- &.col--ellipsis {
2191
- & > .vxe-cell {
2192
- .vxe-cell--wrapper {
2193
- overflow: hidden;
2194
- text-overflow: ellipsis;
2195
- white-space: nowrap;
2196
- }
2197
- }
2198
- }
2199
- & > .vxe-cell {
2200
- display: flex;
2201
- flex-direction: row;
2202
- align-items: center;
2203
- }
2204
- }
2205
-
2206
- /*展开行*/
2207
- .vxe-table--row-expanded-wrapper {
2208
- position: absolute;
2209
- top: 0;
2210
- left: 0;
2211
- width: 100%;
2212
- height: 100%;
2213
- overflow: hidden;
2214
- pointer-events: none;
2215
- }
2216
- .vxe-body--row-expanded-cell {
2217
- position: absolute;
2218
- z-index: 5;
2219
- top: 0;
2220
- left: 0;
2221
- width: 100%;
2222
- overflow: auto;
2223
- border-top: 1px solid transparent;
2224
- border-bottom: 1px solid transparent;
2225
- pointer-events: all;
2226
- &.is--padding {
2227
- .vxe-body--row-expanded-content {
2228
- padding: var(--vxe-ui-table-expand-padding-default);
2229
- }
2230
- }
2231
- }
2232
- .vxe-body--row-expanded-content {
2233
- background-color: var(--vxe-ui-layout-background-color);
2234
- }
2235
- .vxe-body--row-expanded-place-column {
2236
- border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2237
- border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2238
- }
2239
- .vxe-table--expanded {
2240
- cursor: pointer;
2241
- .vxe-table--expand-btn {
2242
- display: inline-block;
2243
- width: 1em;
2244
- height: 1em;
2245
- text-align: center;
2246
- user-select: none;
2247
- color: var(--vxe-ui-font-lighten-color);
2248
- @include baseMixin.createAnimationTransition(transform);
2249
- &:hover {
2250
- color: var(--vxe-ui-font-color);
2251
- }
2252
- }
2253
- &+.vxe-table--expand-label {
2254
- padding-left: 0.5em;
2255
- }
2256
- }
2257
- .vxe-body--expanded-row {
2258
- &.is--padding {
2259
- & > .vxe-body--expanded-column {
2260
- & > .vxe-body--expanded-cell {
2261
- padding: var(--vxe-ui-table-expand-padding-default);
2262
- }
2263
- }
2264
- }
2265
- }
2266
- .vxe-body--expanded-column {
2267
- border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2268
- border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2269
- &.col--ellipsis {
2270
- & > .vxe-body--expanded-cell {
2271
- overflow: hidden;
2272
- text-overflow: ellipsis;
2273
- white-space: nowrap;
2274
- }
2275
- }
2276
- }
2277
- .vxe-body--expanded-cell {
2278
- position: relative;
2279
- z-index: 1;
2280
- &.is--ellipsis {
2281
- overflow: auto;
2282
- outline: 0;
2283
- }
2284
- }
2285
-
2286
- /*拖拽列*/
2287
- .vxe-table--column {
2288
- &.col--drag-move {
2289
- transition: transform 0.5s ease;
2290
- }
2291
- &.col--drag-origin {
2292
- & > .vxe-cell {
2293
- opacity: 0.3;
2294
- }
2295
- }
2296
- }
2297
-
2298
- /*拖拽行把柄*/
2299
- .vxe-cell--drag-handle {
2300
- user-select: none;
2301
- & + span {
2302
- padding-left: 0.5em;
2303
- }
2304
- &:not(.is--disabled) {
2305
- cursor: grab;
2306
- &:active {
2307
- cursor: grabbing;
2308
- }
2309
- &:hover {
2310
- color: var(--vxe-ui-font-primary-color);
2311
- }
2312
- }
2313
- &.is--disabled {
2314
- color: var(--vxe-ui-input-disabled-color);
2315
- cursor: not-allowed;
2316
- }
2317
- }
2318
-
2319
- .vxe-body--row {
2320
- &.row--drag-move {
2321
- transition: transform 0.5s ease;
2322
- }
2323
- &.row--drag-origin {
2324
- & > .vxe-body--column {
2325
- & > .vxe-cell {
2326
- opacity: 0.3;
2327
- }
2328
- }
2329
- }
2330
- }
2331
- .vxe-body--column {
2332
- &.is--drag-cell {
2333
- user-select: none;
2334
- &:not(.is--drag-disabled) {
2335
- cursor: grab;
2336
- &:active {
2337
- cursor: grabbing;
2338
- }
2339
- &:hover {
2340
- color: var(--vxe-ui-font-primary-color);
2341
- }
2342
- }
2343
- &.is--drag-disabled {
2344
- color: var(--vxe-ui-input-disabled-color);
2345
- cursor: not-allowed;
2346
- }
2347
- }
2348
- }
2349
-
2350
- &.size--medium {
2351
- .vxe-cell--checkbox {
2352
- font-size: var(--vxe-checkbox-font-size-medium);
2353
- }
2354
- .vxe-cell--radio {
2355
- font-size: var(--vxe-radio-font-size-medium);
2356
- }
2357
- }
2358
- &.size--small {
2359
- .vxe-cell--checkbox {
2360
- font-size: var(--vxe-checkbox-font-size-small);
2361
- }
2362
- .vxe-cell--radio {
2363
- font-size: var(--vxe-radio-font-size-small);
2364
- }
2365
- }
2366
- &.size--mini {
2367
- .vxe-cell--checkbox {
2368
- font-size: var(--vxe-checkbox-font-size-mini);
2369
- }
2370
- .vxe-cell--radio {
2371
- font-size: var(--vxe-radio-font-size-mini);
2372
- }
2373
- }
2374
-
2375
- /*暂无数据*/
2376
- .vxe-table--empty-placeholder,
2377
- .vxe-table--empty-block {
2378
- color: var(--vxe-ui-input-placeholder-color);
2379
- min-height: var(--vxe-ui-table-row-height-default);
2380
- justify-content: center;
2381
- align-items: center;
2382
- text-align: center;
2383
- overflow: hidden;
2384
- width: 100%;
2385
- outline: 0;
2386
- }
2387
- .vxe-table--empty-block {
2388
- display: none;
2389
- visibility: hidden;
2390
- pointer-events: none;
2391
- }
2392
- .vxe-table--empty-place-wrapper {
2393
- display: none;
2394
- position: absolute;
2395
- width: 100%;
2396
- top: 0;
2397
- z-index: 5;
2398
- overflow: hidden;
2399
- pointer-events: none;
2400
- }
2401
- .vxe-table--empty-placeholder {
2402
- display: flex;
2403
- }
2404
- .vxe-table--empty-content {
2405
- display: block;
2406
- width: 50%;
2407
- pointer-events: auto;
2408
- }
2409
- &.is--empty {
2410
- .vxe-table--empty-block,
2411
- .vxe-table--empty-place-wrapper{
2412
- display: flex;
2413
- }
2414
- }
2415
-
2416
- .vxe-body--column {
2417
- &.col--selected {
2418
- box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-font-primary-color);
2419
- }
2420
- }
2421
-
2422
- /*校验不通过*/
2423
- .vxe-body--column {
2424
- .vxe-cell--valid-error-tip {
2425
- width: 100%;
2426
- position: absolute;
2427
- left: 50%;
2428
- font-size: 12px;
2429
- line-height: 1em;
2430
- transform: translate(-50%, -2px);
2431
- text-align: left;
2432
- z-index: 4;
2433
- padding: 0 var(--vxe-ui-table-cell-padding-default);
2434
- pointer-events: none;
2435
- }
2436
- .vxe-cell--valid-error-wrapper {
2437
- position: relative;
2438
- display: inline-block;
2439
- border-radius: var(--vxe-ui-border-radius);
2440
- pointer-events: auto;
2441
- // &::before {
2442
- // content: "";
2443
- // position: absolute;
2444
- // top: -0.75em;
2445
- // left: 50%;
2446
- // bottom: auto;
2447
- // transform: translateX(-50%);
2448
- // border-width: 0.5em;
2449
- // border-style: solid;
2450
- // border-color: transparent transparent var(--vxe-ui-table-validate-error-color) transparent;
2451
- // }
2452
- }
2453
- .vxe-cell--valid-error-theme-beautify {
2454
- padding: 0.2em 0.6em 0.25em 0.6em;
2455
- color: #fff;
2456
- background-color: var(--vxe-ui-table-validate-error-color);
2457
- .vxe-cell--valid-error-msg {
2458
- background: transparent;
2459
- }
2460
- }
2461
- .vxe-cell--valid-error-theme-normal {
2462
- color: var(--vxe-ui-table-validate-error-color);
2463
- background-color: var(--vxe-ui-table-validate-error-theme-normal-background-color);
2464
- }
2465
- &.col--active,
2466
- &.col--selected {
2467
- position: relative;
2468
- }
2469
- &.col--valid-error {
2470
- &.show--valid-bg {
2471
- background-color: var(--vxe-ui-table-validate-error-cell-background-color);
2472
- }
2473
- .vxe-default-input,
2474
- .vxe-default-textarea,
2475
- .vxe-default-select {
2476
- border-color: var(--vxe-ui-table-validate-error-color);
2477
- }
2478
- .vxe-input,
2479
- .vxe-ico-picker {
2480
- border-color: var(--vxe-ui-table-validate-error-color);
2481
- }
2482
- }
2483
- }
2484
- &.valid-msg--single {
2485
- .vxe-body--row {
2486
- &:last-child {
2487
- .vxe-cell--valid-error-tip {
2488
- bottom: calc(100%);
2489
- transform: translate(-50%, 0);
2490
- // .vxe-cell--valid-error-wrapper {
2491
- // &::before {
2492
- // bottom: -0.75em;
2493
- // top: auto;
2494
- // border-color: var(--vxe-ui-table-validate-error-color) transparent transparent transparent;
2495
- // }
2496
- // }
2497
- }
2498
- &:first-child {
2499
- .vxe-cell--valid-error-tip {
2500
- bottom: auto;
2501
- transform: translate(-50%, -2px);
2502
- // .vxe-cell--valid-error-wrapper {
2503
- // &::before {
2504
- // top: -0.75em;
2505
- // bottom: auto;
2506
- // border-color: transparent transparent var(--vxe-ui-table-validate-error-color) transparent;
2507
- // }
2508
- // }
2509
- }
2510
- }
2511
- }
2512
- }
2513
- }
2514
- &.valid-msg--full {
2515
- .vxe-body--row {
2516
- &:last-child {
2517
- .vxe-cell--valid-error-tip {
2518
- top: calc(100% - 1.3em);
2519
- }
2520
- }
2521
- }
2522
- }
2523
- /*已废弃，旧的校验样式**/
2524
- &.old-cell-valid {
2525
- .vxe-body--column {
2526
- &.col--valid-error {
2527
- .vxe-cell--valid-error-tip {
2528
- width: 320px;
2529
- position: absolute;
2530
- bottom: calc(100% + 4px);
2531
- left: 50%;
2532
- transform: translateX(-50%);
2533
- text-align: center;
2534
- pointer-events: none;
2535
- z-index: 4;
2536
- .vxe-cell--valid-error-msg {
2537
- display: inline-block;
2538
- border-radius: -var(-vxe-border-radius);
2539
- padding: 8px 12px;
2540
- color: #fff;
2541
- background-color: #f56c6c;
2542
- pointer-events: auto;
2543
- }
2544
- // .vxe-cell--valid-error-wrapper {
2545
- // &::before {
2546
- // display: none;
2547
- // }
2548
- // }
2549
- }
2550
- }
2551
- }
2552
- .vxe-body--row {
2553
- &:first-child {
2554
- .vxe-cell--valid-error-tip {
2555
- bottom: auto;
2556
- top: calc(100% + 4px);
2557
- }
2558
- }
2559
- }
2560
- .vxe-body--column {
2561
- &:first-child {
2562
- .vxe-cell--valid-error-tip {
2563
- left: 10px;
2564
- transform: translateX(0);
2565
- text-align: left;
2566
- }
2567
- }
2568
- }
2569
- }
2570
-
2571
- /*单元格标记删除状态*/
2572
- .vxe-body--row {
2573
- &.row--pending {
2574
- color: var(--vxe-ui-font-disabled-color);
2575
- opacity: 0.5;
2576
- text-decoration: line-through;
2577
- cursor: no-drop;
2578
- .vxe-body--column {
2579
- position: relative;
2580
- &:after {
2581
- content: "";
2582
- position: absolute;
2583
- top: 50%;
2584
- left: 0;
2585
- width: 100%;
2586
- height: 0;
2587
- border-bottom: 1px solid var(--vxe-ui-table-validate-error-color);
2588
- z-index: 1;
2589
- }
2590
- }
2591
- }
2592
- }
2593
-
2594
- /*单元格编辑状态*/
2595
- .vxe-body--row {
2596
- &.row--new {
2597
- & > .vxe-body--column {
2598
- position: relative;
2599
- &:before {
2600
- content: "";
2601
- top: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
2602
- left: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
2603
- position: absolute;
2604
- border-width: var(--vxe-ui-table-cell-dirty-width);
2605
- border-style: solid;
2606
- border-color: transparent var(--vxe-ui-table-cell-dirty-insert-color) transparent transparent;
2607
- transform: rotate(45deg);
2608
- }
2609
- }
2610
- }
2611
- }
2612
- .vxe-body--column {
2613
- &.col--dirty {
2614
- position: relative;
2615
- &:before {
2616
- content: "";
2617
- top: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
2618
- left: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
2619
- position: absolute;
2620
- border-width: var(--vxe-ui-table-cell-dirty-width);
2621
- border-style: solid;
2622
- border-color: transparent var(--vxe-ui-table-cell-dirty-update-color) transparent transparent;
2623
- transform: rotate(45deg);
2624
- }
2625
- }
2626
- }
2627
-
2628
- /*可编辑*/
2629
- &.vxe-editable {
2630
- &.cell--highlight {
2631
- .vxe-body--column {
2632
- &.col--active {
2633
- box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-font-primary-color);
2634
- &.col--valid-error {
2635
- box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-table-validate-error-color);
2636
- }
2637
- .vxe-cell {
2638
- .vxe-default-input,
2639
- .vxe-default-textarea {
2640
- border: 0;
2641
- padding: 0;
2642
- }
2643
- .vxe-input {
2644
- .vxe-input--inner {
2645
- border: 0;
2646
- padding-left: 0;
2647
- }
2648
- }
2649
- }
2650
- }
2651
- }
2652
- }
2653
- .vxe-body--column {
2654
- padding: 0;
2655
- }
2656
- }
2657
- }
2658
-
2659
- /*valid error*/
2660
- div.vxe-table--tooltip-wrapper {
2661
- &.vxe-table--valid-error {
2662
- padding: 0;
2663
- color: var(--vxe-ui-table-validate-error-color);
2664
- background-color: var(--vxe-ui-table-validate-error-theme-normal-background-color);
2665
- &.old-cell-valid {
2666
- padding: 8px 12px;
2667
- background-color: #f56c6c;
2668
- color: #fff;
2669
- }
2670
- }
2671
- }
2672
-
2673
- /*footer*/
2674
- .vxe-table--footer-wrapper {
2675
- color: var(--vxe-ui-table-footer-font-color);
2676
- &.body--wrapper{
2677
- outline: 0;
2678
- }
2679
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use '../helpers/baseMixin.scss';
4
+ @use './icon.scss';
5
+ @use './table-module/all.scss';
6
+
7
+ $btnThemeList: (
8
+ (
9
+ name: "primary",
10
+ textColor: var(--vxe-ui-font-primary-color),
11
+ ),
12
+ (
13
+ name: "success",
14
+ textColor: var(--vxe-ui-status-success-color),
15
+ ),
16
+ (
17
+ name: "info",
18
+ textColor: var(--vxe-ui-status-info-color),
19
+ ),
20
+ (
21
+ name: "warning",
22
+ textColor: var(--vxe-ui-status-warning-color),
23
+ ),
24
+ (
25
+ name: "danger",
26
+ textColor: var(--vxe-ui-status-danger-color),
27
+ ),
28
+ (
29
+ name: "error",
30
+ textColor: var(--vxe-ui-status-error-color),
31
+ )
32
+ );
33
+
34
+ .vxe-table-slots,
35
+ .vxe-table--file-form {
36
+ display: none;
37
+ }
38
+
39
+ .vxe-table-vars {
40
+ height: 0;
41
+ width: 0;
42
+ visibility: hidden;
43
+ overflow: hidden;
44
+ user-select: none;
45
+ pointer-events: none;
46
+ .vxe-table-var-default {
47
+ height: var(--vxe-ui-table-row-height-default);
48
+ }
49
+ .vxe-table-var-medium {
50
+ height: var(--vxe-ui-table-row-height-medium);
51
+ }
52
+ .vxe-table-var-small {
53
+ height: var(--vxe-ui-table-row-height-small);
54
+ }
55
+ .vxe-table-var-mini {
56
+ height: var(--vxe-ui-table-row-height-mini);
57
+ }
58
+ }
59
+
60
+ .vxe-table--print-frame {
61
+ position: fixed;
62
+ bottom: -100%;
63
+ left: -100%;
64
+ height: 0;
65
+ width: 0;
66
+ border: 0;
67
+ }
68
+ .vxe-table--layout-wrapper {
69
+ display: flex;
70
+ flex-direction: row;
71
+ background-color: var(--vxe-ui-layout-background-color);
72
+ }
73
+ .vxe-table--viewport-wrapper {
74
+ position: relative;
75
+ overflow: hidden;
76
+ flex-grow: 1;
77
+ &.x-ob--contain {
78
+ & > .vxe-table--main-wrapper {
79
+ & > .vxe-table--header-wrapper {
80
+ & > .vxe-table--header-inner-wrapper {
81
+ overscroll-behavior-x: contain;
82
+ }
83
+ }
84
+ & > .vxe-table--body-wrapper {
85
+ & > .vxe-table--body-inner-wrapper {
86
+ overscroll-behavior-x: contain;
87
+ }
88
+ }
89
+ & > .vxe-table--footer-wrapper {
90
+ & > .vxe-table--footer-inner-wrapper {
91
+ overscroll-behavior-x: contain;
92
+ }
93
+ }
94
+ }
95
+ }
96
+ &.y-ob--contain {
97
+ & > .vxe-table--main-wrapper {
98
+ & > .vxe-table--body-wrapper {
99
+ & > .vxe-table--body-inner-wrapper {
100
+ overscroll-behavior-y: contain;
101
+ }
102
+ }
103
+ }
104
+ }
105
+ }
106
+ .vxe-table--header-wrapper,
107
+ .vxe-table--body-wrapper,
108
+ .vxe-table--footer-wrapper,
109
+ .vxe-table--fixed-left-body-wrapper,
110
+ .vxe-table--fixed-right-body-wrapper {
111
+ overflow: hidden;
112
+ outline: 0;
113
+ scrollbar-width: none;
114
+ -webkit-overflow-scrolling: touch;
115
+ }
116
+ .vxe-table--header-inner-wrapper,
117
+ .vxe-table--body-inner-wrapper,
118
+ .vxe-table--footer-inner-wrapper {
119
+ position: relative;
120
+ width: 100%;
121
+ height: 100%;
122
+ scrollbar-width: none;
123
+ -ms-overflow-style: none;
124
+ -webkit-overflow-scrolling: touch;
125
+ &::-webkit-scrollbar {
126
+ display: none;
127
+ }
128
+ }
129
+ .vxe-table--header-inner-wrapper,
130
+ .vxe-table--footer-inner-wrapper {
131
+ overflow-y: hidden;
132
+ overflow-x: scroll;
133
+ }
134
+ .vxe-table--body-inner-wrapper {
135
+ overflow-y: scroll;
136
+ overflow-x: scroll;
137
+ }
138
+
139
+ // 禁用滚动条
140
+ .vxe-table--main-wrapper {
141
+ &.sx--hidden {
142
+ & > .vxe-table--header-wrapper {
143
+ & > .vxe-table--header-inner-wrapper {
144
+ overflow-x: hidden;
145
+ }
146
+ }
147
+ & > .vxe-table--body-wrapper {
148
+ & > .vxe-table--body-inner-wrapper {
149
+ overflow-x: hidden;
150
+ }
151
+ }
152
+ & > .vxe-table--footer-wrapper {
153
+ & > .vxe-table--footer-inner-wrapper {
154
+ overflow-x: hidden;
155
+ }
156
+ }
157
+ }
158
+ &.sy--hidden {
159
+ & > .vxe-table--body-wrapper {
160
+ & > .vxe-table--body-inner-wrapper {
161
+ overflow-y: hidden;
162
+ }
163
+ }
164
+ }
165
+ }
166
+ .vxe-table--fixed-left-wrapper,
167
+ .vxe-table--fixed-right-wrapper {
168
+ &.sx--hidden {
169
+ & > .vxe-table--body-wrapper {
170
+ & > .vxe-table--body-inner-wrapper {
171
+ overflow-x: hidden;
172
+ }
173
+ }
174
+ }
175
+ &.sy--hidden {
176
+ & > .vxe-table--body-wrapper {
177
+ & > .vxe-table--body-inner-wrapper {
178
+ overflow-y: hidden;
179
+ }
180
+ }
181
+ }
182
+ }
183
+
184
+ .vxe-loading--custom-wrapper {
185
+ display: none;
186
+ position: absolute;
187
+ width: 100%;
188
+ height: 100%;
189
+ top: 0;
190
+ left: 0;
191
+ z-index: 99;
192
+ user-select: none;
193
+ &.is--visible {
194
+ display: block;
195
+ }
196
+ }
197
+
198
+ /*默认的渲染*/
199
+ .vxe-header--column,
200
+ .vxe-footer--column {
201
+ &.fixed--width {
202
+ & > .vxe-cell {
203
+ & > .vxe-cell--wrapper {
204
+ .vxe-default-input,
205
+ .vxe-default-textarea,
206
+ .vxe-default-select {
207
+ width: 100%;
208
+ }
209
+ .vxe-input,
210
+ .vxe-textarea,
211
+ .vxe-select,
212
+ .vxe-tree-select,
213
+ .vxe-date-picker,
214
+ .vxe-date-range-picker,
215
+ .vxe-number-input,
216
+ .vxe-ico-picker {
217
+ width: 100%;
218
+ }
219
+ }
220
+ }
221
+ }
222
+ }
223
+ .vxe-body--column {
224
+ &.fixed--width {
225
+ & > .vxe-cell {
226
+ & > .vxe-cell--wrapper {
227
+ & > .vxe-default-input,
228
+ & > .vxe-default-textarea,
229
+ & > .vxe-default-select {
230
+ width: 100%;
231
+ }
232
+ & > .vxe-input,
233
+ & > .vxe-textarea,
234
+ & > .vxe-select,
235
+ & > .vxe-tree-select,
236
+ & > .vxe-date-picker,
237
+ & > .vxe-date-range-picker,
238
+ & > .vxe-number-input,
239
+ & > .vxe-ico-picker {
240
+ width: 100%;
241
+ }
242
+ & > .vxe-row-group--tree-node,
243
+ & > .vxe-cell--tree-node {
244
+ .vxe-default-input,
245
+ .vxe-default-textarea,
246
+ .vxe-default-select,
247
+ .vxe-input,
248
+ .vxe-textarea,
249
+ .vxe-select,
250
+ .vxe-tree-select,
251
+ .vxe-date-picker,
252
+ .vxe-date-range-picker,
253
+ .vxe-number-input,
254
+ .vxe-ico-picker {
255
+ width: 100%;
256
+ }
257
+ }
258
+ }
259
+ }
260
+ }
261
+ }
262
+ .vxe-table--filter-template {
263
+ & > .vxe-default-input,
264
+ & > .vxe-default-textarea,
265
+ & > .vxe-default-select {
266
+ width: 100%;
267
+ }
268
+ & > .vxe-input,
269
+ & > .vxe-textarea,
270
+ & > .vxe-select,
271
+ & > .vxe-tree-select,
272
+ & > .vxe-date-picker,
273
+ & > .vxe-date-range-picker,
274
+ & > .vxe-number-input,
275
+ & > .vxe-ico-picker {
276
+ width: 100%;
277
+ }
278
+ }
279
+ .vxe-cell,
280
+ .vxe-table--filter-template {
281
+ .vxe-default-input,
282
+ .vxe-default-textarea {
283
+ background-color: var(--vxe-ui-layout-background-color);
284
+ }
285
+ .vxe-default-input,
286
+ .vxe-default-textarea,
287
+ .vxe-default-select {
288
+ font-family: var(--vxe-ui-font-family);
289
+ outline: 0;
290
+ color: var(--vxe-ui-font-color);
291
+ border-radius: var(--vxe-ui-border-radius);
292
+ border: 1px solid var(--vxe-ui-input-border-color);
293
+ &:focus {
294
+ border: 1px solid var(--vxe-ui-font-primary-color);
295
+ }
296
+ &[disabled] {
297
+ cursor: not-allowed;
298
+ background-color: var(--vxe-ui-input-disabled-background-color);
299
+ }
300
+ }
301
+ .vxe-default-input,
302
+ .vxe-default-textarea,
303
+ .vxe-default-select {
304
+ height: var(--vxe-ui-input-height-default);
305
+ }
306
+ .vxe-default-input {
307
+ &[type="date"]::-webkit-inner-spin-button {
308
+ margin-top: 4px;
309
+ }
310
+ &[type="date"]::-webkit-inner-spin-button,
311
+ &[type="number"]::-webkit-inner-spin-button {
312
+ height: 24px;
313
+ }
314
+ &::placeholder {
315
+ color: var(--vxe-ui-input-placeholder-color);
316
+ }
317
+ }
318
+ .vxe-default-textarea {
319
+ font-size: 1em;
320
+ resize: none;
321
+ vertical-align: middle;
322
+ }
323
+ & > .vxe-input > .vxe-input--inner,
324
+ & > .vxe-textarea > .vxe-textarea--inner {
325
+ padding: 0 2px;
326
+ }
327
+ & > .vxe-textarea--inner,
328
+ & > .vxe-default-textarea {
329
+ resize: none;
330
+ }
331
+ & > .vxe-row-group--tree-node,
332
+ & > .vxe-cell--tree-node {
333
+ .vxe-input > .vxe-input--inner,
334
+ .vxe-textarea > .vxe-textarea--inner {
335
+ padding: 0 2px;
336
+ }
337
+ .vxe-textarea--inner,
338
+ .vxe-default-textarea {
339
+ resize: none;
340
+ }
341
+ }
342
+ }
343
+ .vxe-body--column {
344
+ &.col--vertical-top {
345
+ &.col--active {
346
+ & > .vxe-cell {
347
+ & > .vxe-cell--wrapper {
348
+ height: 100%;
349
+ & > .vxe-default-textarea {
350
+ height: 100%;
351
+ }
352
+ }
353
+ }
354
+ }
355
+ }
356
+ }
357
+ /*行高*/
358
+ .vxe-table {
359
+ &:not([data-calc-row]) {
360
+ .vxe-body--column {
361
+ &.col--vertical-top {
362
+ &:not(.col--active) {
363
+ & > .vxe-cell {
364
+ & > .vxe-cell--wrapper {
365
+ min-height: 100%;
366
+ }
367
+ }
368
+ }
369
+ }
370
+ }
371
+ }
372
+ }
373
+
374
+ /*负数显示红色*/
375
+ .vxe-cell--label {
376
+ &.is--negative {
377
+ color: var(--vxe-ui-table-cell-negative-color);
378
+ }
379
+ }
380
+
381
+ .vxe-table--checkbox-range,
382
+ .vxe-table--cell-main-area,
383
+ .vxe-table--cell-item-area,
384
+ .vxe-table--cell-extend-area,
385
+ .vxe-table--cell-active-area,
386
+ .vxe-table--cell-copy-area,
387
+ .vxe-table--cell-col-status-area,
388
+ .vxe-table--cell-row-status-area {
389
+ display: none;
390
+ position: absolute;
391
+ pointer-events: none;
392
+ z-index: 1;
393
+ }
394
+
395
+ .vxe-table--header-wrapper {
396
+ .vxe-table--cell-col-status-area {
397
+ top: 0;
398
+ height: 100%;
399
+ }
400
+ }
401
+
402
+ .vxe-table--fixed-left-wrapper,
403
+ .vxe-table--fixed-right-wrapper {
404
+ .vxe-table--checkbox-range,
405
+ .vxe-table--cell-main-area,
406
+ .vxe-table--cell-item-area,
407
+ .vxe-table--cell-extend-area,
408
+ .vxe-table--cell-active-area,
409
+ .vxe-table--cell-copy-area,
410
+ .vxe-table--cell-col-status-area,
411
+ .vxe-table--cell-row-status-area {
412
+ z-index: 2;
413
+ }
414
+ }
415
+
416
+ .vxe-table--fixed-left-wrapper {
417
+ .vxe-table--cell-main-area,
418
+ .vxe-table--cell-item-area,
419
+ .vxe-table--cell-extend-area,
420
+ .vxe-table--cell-active-area {
421
+ &[half="1"] {
422
+ border-right: 0;
423
+ }
424
+ }
425
+ .vxe-table--cell-copy-area {
426
+ &[half="1"] {
427
+ background-size: var(--vxe-ui-table-cell-clip-area-border-width) 12px, 0 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
428
+ }
429
+ }
430
+ }
431
+
432
+ .vxe-table--fixed-right-wrapper {
433
+ .vxe-table--cell-main-area,
434
+ .vxe-table--cell-item-area,
435
+ .vxe-table--cell-extend-area,
436
+ .vxe-table--cell-active-area {
437
+ &[half="1"] {
438
+ border-left: 0;
439
+ }
440
+ }
441
+ .vxe-table--cell-copy-area {
442
+ &[half="1"] {
443
+ background-size: 0 12px, var(--vxe-ui-table-cell-clip-area-border-width) 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
444
+ }
445
+ }
446
+ }
447
+
448
+ /*复选框-范围选择*/
449
+ .vxe-table--checkbox-range {
450
+ background-color: var(--vxe-ui-table-checkbox-range-background-color);
451
+ border: var(--vxe-ui-table-checkbox-range-border-width) solid var(--vxe-ui-table-checkbox-range-border-color);
452
+ }
453
+
454
+ .vxe-table--cell-area {
455
+ height: 0;
456
+ font-size: 0;
457
+ display: none;
458
+ & > .vxe-table--cell-main-area {
459
+ background-color: var(--vxe-ui-table-cell-area-background-color);
460
+ border: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
461
+ }
462
+ .vxe-table--cell-main-area-btn {
463
+ display: none;
464
+ position: absolute;
465
+ right: -1px;
466
+ bottom: -1px;
467
+ width: 7px;
468
+ height: 7px;
469
+ border-style: solid;
470
+ border-color: var(--vxe-ui-table-cell-main-area-extension-border-color);
471
+ border-width: 1px 0 0 1px;
472
+ background-color: var(--vxe-ui-table-cell-main-area-extension-background-color);
473
+ pointer-events: auto;
474
+ cursor: crosshair;
475
+ }
476
+ .vxe-table--cell-extend-area {
477
+ border: var(--vxe-ui-table-cell-extend-area-border-width) solid var(--vxe-ui-table-cell-extend-area-border-color);
478
+ }
479
+ .vxe-table--cell-col-status-area,
480
+ .vxe-table--cell-row-status-area {
481
+ background-color: var(--vxe-ui-table-cell-area-status-background-color);
482
+ }
483
+ .vxe-table--cell-col-status-area {
484
+ border-bottom: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
485
+ }
486
+ .vxe-table--cell-row-status-area {
487
+ border-right: var(--vxe-ui-table-cell-area-border-width) solid var(--vxe-ui-table-cell-area-border-color);
488
+ }
489
+ }
490
+
491
+ @keyframes moveCopyCellBorder {
492
+ from {
493
+ }
494
+ to {
495
+ background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
496
+ }
497
+ }
498
+
499
+ .vxe-table--cell-copy-area {
500
+ background: linear-gradient(0deg, transparent 6px, var(--vxe-ui-table-cell-clip-area-border-color) 6px) repeat-y,
501
+ linear-gradient(0deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-y,
502
+ linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-x,
503
+ linear-gradient(90deg, transparent 50%, var(--vxe-ui-table-cell-clip-area-border-color) 0) repeat-x;
504
+ background-size: var(--vxe-ui-table-cell-clip-area-border-width) 12px, var(--vxe-ui-table-cell-clip-area-border-width) 12px, 12px var(--vxe-ui-table-cell-clip-area-border-width), 12px var(--vxe-ui-table-cell-clip-area-border-width);
505
+ background-position: 0 0, 100% 0, 0 0, 0 100%;
506
+ animation: moveCopyCellBorder .5s infinite linear;
507
+ }
508
+
509
+ .vxe-table--cell-active-area {
510
+ border-color: var(--vxe-ui-table-cell-active-area-border-color);
511
+ border-style: solid;
512
+ border-width: var(--vxe-ui-table-cell-active-area-border-width);
513
+ background-color: var(--vxe-ui-table-cell-active-area-background-color);
514
+ }
515
+
516
+ .vxe-table--cell-multi-area {
517
+ & > .vxe-table--cell-item-area {
518
+ background-color: var(--vxe-ui-table-cell-area-background-color);
519
+ }
520
+ }
521
+
522
+ /*圆角*/
523
+ .vxe-table--render-default {
524
+ &.is--round {
525
+ %AllRadius {
526
+ border-radius: var(--vxe-ui-table-border-radius);
527
+ }
528
+ %TopRadius {
529
+ border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
530
+ }
531
+ %TopLeftRadius {
532
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
533
+ }
534
+ %TopRightRadius {
535
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
536
+ }
537
+ %BottomRadius {
538
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
539
+ }
540
+ %BottomLeftRadius {
541
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
542
+ }
543
+ %BottomRightRadius {
544
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
545
+ }
546
+ @extend %AllRadius;
547
+ &.sy-pos--right {
548
+ &.sx-pos--bottom {
549
+ &.is--scroll-y {
550
+ &.is--scroll-x {
551
+ .vxe-table--header-wrapper {
552
+ &.body--wrapper {
553
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
554
+ }
555
+ &.fixed-left--wrapper {
556
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
557
+ }
558
+ }
559
+ .vxe-table--border-line {
560
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
561
+ }
562
+ }
563
+ &.not--scroll-x {
564
+ .vxe-table--header-wrapper {
565
+ &.body--wrapper {
566
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
567
+ }
568
+ &.fixed-left--wrapper {
569
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
570
+ }
571
+ }
572
+ .vxe-table--footer-wrapper {
573
+ &.body--wrapper {
574
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
575
+ }
576
+ &.fixed-left--wrapper {
577
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
578
+ }
579
+ }
580
+ .vxe-table--border-line {
581
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 var(--vxe-ui-table-border-radius);
582
+ }
583
+ }
584
+ }
585
+ &.not--scroll-y {
586
+ &.is--scroll-x {
587
+ .vxe-table--header-wrapper {
588
+ &.body--wrapper {
589
+ border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
590
+ }
591
+ &.fixed-left--wrapper {
592
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
593
+ }
594
+ &.fixed-right--wrapper {
595
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
596
+ }
597
+ }
598
+ .vxe-table--border-line {
599
+ border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
600
+ }
601
+ }
602
+ &.not--scroll-x {
603
+ .vxe-table--header-wrapper {
604
+ &.body--wrapper {
605
+ border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
606
+ }
607
+ &.fixed-right--wrapper {
608
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
609
+ }
610
+ }
611
+ .vxe-table--footer-wrapper {
612
+ &.body--wrapper {
613
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
614
+ }
615
+ &.fixed-right--wrapper {
616
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
617
+ }
618
+ }
619
+ .vxe-table--border-line {
620
+ @extend %AllRadius;
621
+ }
622
+ }
623
+ }
624
+ }
625
+ &.sx-pos--top {
626
+ &.is--scroll-y {
627
+ &.is--scroll-x {
628
+ .vxe-table--footer-wrapper {
629
+ &.body--wrapper {
630
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
631
+ }
632
+ &.fixed-left--wrapper {
633
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
634
+ }
635
+ }
636
+ .vxe-table--border-line {
637
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
638
+ }
639
+ }
640
+ &.not--scroll-x {
641
+ .vxe-table--header-wrapper {
642
+ &.body--wrapper {
643
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
644
+ }
645
+ &.fixed-left--wrapper {
646
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
647
+ }
648
+ }
649
+ .vxe-table--footer-wrapper {
650
+ &.body--wrapper {
651
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
652
+ }
653
+ &.fixed-left--wrapper {
654
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
655
+ }
656
+ }
657
+ .vxe-table--border-line {
658
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 var(--vxe-ui-table-border-radius);
659
+ }
660
+ }
661
+ }
662
+ &.not--scroll-y {
663
+ &.is--scroll-x {
664
+ .vxe-table--footer-wrapper {
665
+ &.body--wrapper {
666
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
667
+ }
668
+ &.fixed-left--wrapper {
669
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
670
+ }
671
+ &.fixed-right--wrapper {
672
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
673
+ }
674
+ }
675
+ .vxe-table--border-line {
676
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
677
+ }
678
+ }
679
+ &.not--scroll-x {
680
+ .vxe-table--border-line {
681
+ @extend %AllRadius;
682
+ }
683
+ }
684
+ }
685
+ }
686
+ }
687
+ &.sy-pos--left {
688
+ &.sx-pos--bottom {
689
+ &.is--scroll-y {
690
+ &.is--scroll-x {
691
+ .vxe-table--border-line {
692
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
693
+ }
694
+ }
695
+ &.not--scroll-x {
696
+ .vxe-table--header-wrapper {
697
+ &.body--wrapper {
698
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
699
+ }
700
+ &.fixed-right--wrapper {
701
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
702
+ }
703
+ }
704
+ .vxe-table--footer-wrapper {
705
+ &.body--wrapper {
706
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
707
+ }
708
+ &.fixed-right--wrapper {
709
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
710
+ }
711
+ }
712
+ .vxe-table--border-line {
713
+ border-radius: 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0;
714
+ }
715
+ }
716
+ }
717
+ &.not--scroll-y {
718
+ &.is--scroll-x {
719
+ .vxe-table--header-wrapper {
720
+ &.body--wrapper {
721
+ border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
722
+ }
723
+ &.fixed-left--wrapper {
724
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
725
+ }
726
+ &.fixed-right--wrapper {
727
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
728
+ }
729
+ }
730
+ .vxe-table--border-line {
731
+ border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
732
+ }
733
+ }
734
+ &.not--scroll-x {
735
+ .vxe-table--header-wrapper {
736
+ &.body--wrapper {
737
+ border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
738
+ }
739
+ &.fixed-left--wrapper {
740
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
741
+ }
742
+ &.fixed-right--wrapper {
743
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
744
+ }
745
+ }
746
+ .vxe-table--footer-wrapper {
747
+ &.body--wrapper {
748
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
749
+ }
750
+ &.fixed-left--wrapper {
751
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
752
+ }
753
+ &.fixed-right--wrapper {
754
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
755
+ }
756
+ }
757
+ .vxe-table--border-line {
758
+ @extend %AllRadius;
759
+ }
760
+ }
761
+ }
762
+ }
763
+ &.sx-pos--top {
764
+ &.is--scroll-y {
765
+ &.is--scroll-x {
766
+ .vxe-table--footer-wrapper {
767
+ &.body--wrapper {
768
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
769
+ }
770
+ &.fixed-right--wrapper {
771
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
772
+ }
773
+ }
774
+ .vxe-table--border-line {
775
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
776
+ }
777
+ }
778
+ &.not--scroll-x {
779
+ .vxe-table--header-wrapper {
780
+ &.body--wrapper {
781
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
782
+ }
783
+ &.fixed-right--wrapper {
784
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
785
+ }
786
+ }
787
+ .vxe-table--footer-wrapper {
788
+ &.body--wrapper {
789
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
790
+ }
791
+ &.fixed-right--wrapper {
792
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
793
+ }
794
+ }
795
+ .vxe-table--border-line {
796
+ border-radius: 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0;
797
+ }
798
+ }
799
+ }
800
+ &.not--scroll-y {
801
+ &.is--scroll-x {
802
+ .vxe-table--footer-wrapper {
803
+ &.body--wrapper {
804
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
805
+ }
806
+ &.fixed-right--wrapper {
807
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
808
+ }
809
+ }
810
+ .vxe-table--border-line {
811
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
812
+ }
813
+ }
814
+ &.not--scroll-x {
815
+ .vxe-table--header-wrapper {
816
+ &.body--wrapper {
817
+ border-radius: var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius) 0 0;
818
+ }
819
+ &.fixed-left--wrapper {
820
+ border-radius: var(--vxe-ui-table-border-radius) 0 0 0;
821
+ }
822
+ &.fixed-right--wrapper {
823
+ border-radius: 0 var(--vxe-ui-table-border-radius) 0 0;
824
+ }
825
+ }
826
+ .vxe-table--footer-wrapper {
827
+ &.body--wrapper {
828
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) var(--vxe-ui-table-border-radius);
829
+ }
830
+ &.fixed-left--wrapper {
831
+ border-radius: 0 0 0 var(--vxe-ui-table-border-radius);
832
+ }
833
+ &.fixed-right--wrapper {
834
+ border-radius: 0 0 var(--vxe-ui-table-border-radius) 0;
835
+ }
836
+ }
837
+ .vxe-table--border-line {
838
+ @extend %AllRadius;
839
+ }
840
+ }
841
+ }
842
+ }
843
+ }
844
+ }
845
+ }
846
+
847
+ /*列宽*/
848
+ .vxe-table {
849
+ &[data-calc-col] {
850
+ .vxe-header--column,
851
+ .vxe-body--column,
852
+ .vxe-footer--column {
853
+ .vxe-cell {
854
+ & > .vxe-cell--wrapper {
855
+ word-break: break-all;
856
+ white-space: nowrap;
857
+ }
858
+ }
859
+ }
860
+ }
861
+ &:not([data-calc-col]) {
862
+ .vxe-cell--wrapper {
863
+ min-width: 100%;
864
+ }
865
+ }
866
+ }
867
+
868
+ /*scroll*/
869
+ .vxe-table {
870
+ &.is--loading {
871
+ & > .vxe-table--scroll-x-virtual {
872
+ visibility: hidden;
873
+ }
874
+ & > .vxe-table--layout-wrapper {
875
+ & > .vxe-table--scroll-y-virtual {
876
+ visibility: hidden;
877
+ }
878
+ }
879
+ }
880
+ .vxe-table--scroll-x-virtual {
881
+ height: 0;
882
+ }
883
+ .vxe-table--scroll-y-virtual {
884
+ width: 0;
885
+ }
886
+ .vxe-table--scroll-x-virtual,
887
+ .vxe-table--scroll-y-virtual {
888
+ visibility: hidden;
889
+ position: relative;
890
+ flex-shrink: 0;
891
+ z-index: 7;
892
+ }
893
+ .vxe-table--scroll-x-handle,
894
+ .vxe-table--scroll-y-handle,
895
+ .vxe-table--scroll-x-wrapper,
896
+ .vxe-table--scroll-y-wrapper,
897
+ .vxe-table--scroll-y-top-corner,
898
+ .vxe-table--scroll-y-bottom-corner,
899
+ .vxe-table--scroll-x-left-corner,
900
+ .vxe-table--scroll-x-right-corner {
901
+ position: absolute;
902
+ }
903
+ .vxe-table--scroll-x-handle,
904
+ .vxe-table--scroll-x-wrapper {
905
+ width: 100%;
906
+ left: 0;
907
+ bottom: 0;
908
+ }
909
+ .vxe-table--scroll-x-wrapper {
910
+ height: 100%;
911
+ }
912
+ .vxe-table--scroll-x-handle {
913
+ overflow-y: hidden;
914
+ overflow-x: scroll;
915
+ height: var(--vxe-ui-table-view-scrollbar-height);
916
+ }
917
+ .vxe-table--scroll-y-handle,
918
+ .vxe-table--scroll-y-wrapper {
919
+ width: 100%;
920
+ height: 100%;
921
+ right: 0;
922
+ top: 0;
923
+ }
924
+ .vxe-table--scroll-y-handle {
925
+ overflow-y: scroll;
926
+ overflow-x: hidden;
927
+ width: var(--vxe-ui-table-view-scrollbar-width);
928
+ height: 100%;
929
+ }
930
+ .vxe-table--scroll-x-space {
931
+ height: 1px;
932
+ }
933
+ .vxe-table--scroll-y-space {
934
+ width: 1px;
935
+ }
936
+ .vxe-table--scroll-x-left-corner,
937
+ .vxe-table--scroll-x-right-corner,
938
+ .vxe-table--scroll-y-top-corner,
939
+ .vxe-table--scroll-y-bottom-corner {
940
+ display: none;
941
+ position: absolute;
942
+ }
943
+ .vxe-table--scroll-x-left-corner,
944
+ .vxe-table--scroll-x-right-corner {
945
+ bottom: 0;
946
+ width: 0;
947
+ height: 100%;
948
+ &::before {
949
+ content: "";
950
+ position: absolute;
951
+ top: 0;
952
+ left: 0;
953
+ width: calc(100% + var(--vxe-ui-table-border-width));
954
+ height: 100%;
955
+ z-index: 1;
956
+ border-width: var(--vxe-ui-table-border-width);
957
+ border-style: solid;
958
+ border-color: var(--vxe-ui-table-border-color);
959
+ }
960
+ }
961
+ .vxe-table--scroll-x-left-corner {
962
+ left: 0;
963
+ }
964
+ .vxe-table--scroll-x-right-corner {
965
+ right: 0;
966
+ }
967
+ &.sy-pos--right {
968
+ .vxe-table--scroll-y-top-corner,
969
+ .vxe-table--scroll-y-bottom-corner {
970
+ right: 0;
971
+ width: calc(100% + var(--vxe-ui-table-border-width));
972
+ }
973
+ .vxe-table--scroll-x-right-corner {
974
+ &::before {
975
+ left: calc(var(--vxe-ui-table-border-width) * -1);
976
+ }
977
+ }
978
+ .vxe-table--scroll-x-right-corner {
979
+ &::before {
980
+ border-right: 0;
981
+ }
982
+ }
983
+ }
984
+ &.sy-pos--left {
985
+ .vxe-table--scroll-y-top-corner,
986
+ .vxe-table--scroll-y-bottom-corner {
987
+ left: 0;
988
+ width: calc(100% + var(--vxe-ui-table-border-width));
989
+ }
990
+ .vxe-table--scroll-x-left-corner {
991
+ &::before {
992
+ top: calc(var(--vxe-ui-table-border-width) * -1);
993
+ height: calc(100% + var(--vxe-ui-table-border-width));
994
+ }
995
+ }
996
+ }
997
+ &.sx-pos--bottom {
998
+ .vxe-table--scroll-x-right-corner {
999
+ bottom: var(--vxe-ui-table-border-width);
1000
+ &::before {
1001
+ border-bottom: 0;
1002
+ }
1003
+ }
1004
+ }
1005
+ .vxe-table--scroll-y-top-corner {
1006
+ background-color: var(--vxe-ui-table-header-background-color);
1007
+ }
1008
+ .vxe-table--scroll-y-top-corner,
1009
+ .vxe-table--scroll-y-bottom-corner {
1010
+ top: 0;
1011
+ height: 0;
1012
+ }
1013
+ .vxe-table--scroll-y-bottom-corner {
1014
+ margin-top: calc(var(--vxe-ui-table-border-width) * -1);
1015
+ }
1016
+ }
1017
+
1018
+ /*header*/
1019
+ .vxe-table {
1020
+ .vxe-table--header-wrapper {
1021
+ color: var(--vxe-ui-table-header-font-color);
1022
+ }
1023
+ /*排序*/
1024
+ .vxe-cell--sort {
1025
+ text-align: center;
1026
+ position: relative;
1027
+ padding: 0 0.1em 0 0.2em;
1028
+ }
1029
+ .vxe-cell--sort-vertical-layout {
1030
+ display: inline-flex;
1031
+ flex-direction: column;
1032
+ height: 1.8em;
1033
+ vertical-align: middle;
1034
+ .vxe-sort--asc-btn,
1035
+ .vxe-sort--desc-btn {
1036
+ height: 0.6em;
1037
+ }
1038
+ }
1039
+ .vxe-cell--sort-horizontal-layout {
1040
+ display: inline-flex;
1041
+ flex-direction: row;
1042
+ .vxe-sort--asc-btn,
1043
+ .vxe-sort--desc-btn {
1044
+ width: 0.5em;
1045
+ }
1046
+ }
1047
+ .vxe-sort--asc-btn,
1048
+ .vxe-sort--desc-btn {
1049
+ color: var(--vxe-ui-table-column-icon-border-color);
1050
+ cursor: pointer;
1051
+ &:hover {
1052
+ color: var(--vxe-ui-font-color);
1053
+ }
1054
+ &.sort--active {
1055
+ color: var(--vxe-ui-font-primary-color);
1056
+ }
1057
+ }
1058
+ }
1059
+
1060
+ .vxe-sort--asc-btn,
1061
+ .vxe-sort--desc-btn,
1062
+ .vxe-filter--btn {
1063
+ &:before,
1064
+ &:after {
1065
+ @include baseMixin.createAnimationTransition(border);
1066
+ }
1067
+ }
1068
+
1069
+ .vxe-header--column {
1070
+ position: relative;
1071
+ font-weight: var(--vxe-ui-table-header-font-weight);
1072
+ // user-select: none;
1073
+ &.col--ellipsis {
1074
+ & > .vxe-cell {
1075
+ .vxe-cell--wrapper {
1076
+ display: flex;
1077
+ align-items: center;
1078
+ .vxe-cell--drag-handle,
1079
+ .vxe-cell--sort,
1080
+ .vxe-cell--filter,
1081
+ .vxe-cell-title-prefix-icon,
1082
+ .vxe-cell-title-suffix-icon,
1083
+ .vxe-cell--checkbox,
1084
+ .vxe-cell-title-suffix-icon,
1085
+ .vxe-cell--required-icon {
1086
+ flex-shrink: 0;
1087
+ }
1088
+ }
1089
+ .vxe-cell--title {
1090
+ overflow: hidden;
1091
+ text-overflow: ellipsis;
1092
+ white-space: nowrap;
1093
+ }
1094
+ }
1095
+ }
1096
+ .vxe-cell--required-icon {
1097
+ display: inline-block;
1098
+ color: var(--vxe-ui-table-validate-error-color);
1099
+ width: 0.8em;
1100
+ height: 1em;
1101
+ line-height: 1em;
1102
+ position: relative;
1103
+ & > i {
1104
+ font-family: Verdana,Arial,Tahoma;
1105
+ font-weight: normal;
1106
+ &:before {
1107
+ content: "*";
1108
+ position: absolute;
1109
+ left: 0;
1110
+ top: 0.2em;
1111
+ }
1112
+ }
1113
+ }
1114
+ // .vxe-cell--required-icon,
1115
+ // .vxe-cell--edit-icon,
1116
+ // .vxe-cell-title-prefix-icon,
1117
+ // .vxe-cell-title-suffix-icon,
1118
+ // .vxe-cell--title {
1119
+ // vertical-align: middle;
1120
+ // }
1121
+ .vxe-cell--required-icon {
1122
+ padding-right: 0.1em;
1123
+ }
1124
+ .vxe-cell--edit-icon,
1125
+ .vxe-cell-title-prefix-icon,
1126
+ .vxe-cell-title-suffix-icon {
1127
+ padding: 0.2em;
1128
+ }
1129
+ .vxe-cell-title-prefix-icon,
1130
+ .vxe-cell-title-suffix-icon {
1131
+ @for $index from 0 to list.length($btnThemeList) {
1132
+ $item: list.nth($btnThemeList, $index + 1);
1133
+ &.theme--#{map.get($item, name)} {
1134
+ color: map.get($item, textColor);
1135
+ }
1136
+ }
1137
+ }
1138
+ }
1139
+
1140
+ .vxe-cell--col-resizable {
1141
+ position: absolute;
1142
+ right: -0.3em;
1143
+ bottom: 0;
1144
+ width: 0.6em;
1145
+ height: 100%;
1146
+ text-align: center;
1147
+ z-index: 1;
1148
+ cursor: col-resize;
1149
+ &.is--line {
1150
+ &:before,
1151
+ &:after {
1152
+ content: "";
1153
+ display: inline-block;
1154
+ vertical-align: middle;
1155
+ }
1156
+ &:before {
1157
+ width: 1px;
1158
+ height: 50%;
1159
+ background-color: var(--vxe-ui-table-resizable-line-color);
1160
+ }
1161
+ &:after {
1162
+ width: 0;
1163
+ height: 100%;
1164
+ }
1165
+ }
1166
+ }
1167
+ .vxe-header--column {
1168
+ &:last-child {
1169
+ & > .vxe-cell--col-resizable {
1170
+ right: 0;
1171
+ }
1172
+ }
1173
+ }
1174
+ .vxe-table--fixed-right-wrapper {
1175
+ .vxe-cell--col-resizable {
1176
+ right: auto;
1177
+ left: -0.3em;
1178
+ }
1179
+ }
1180
+
1181
+ .vxe-body--column {
1182
+ .vxe-cell--row-resizable {
1183
+ position: absolute;
1184
+ left: 0;
1185
+ bottom: -0.4em;
1186
+ height: 0.8em;
1187
+ width: 100%;
1188
+ text-align: center;
1189
+ z-index: 1;
1190
+ cursor: row-resize;
1191
+ }
1192
+ }
1193
+ .vxe-body--row {
1194
+ &:last-child {
1195
+ .vxe-body--column {
1196
+ .vxe-cell--row-resizable {
1197
+ height: 0.4em;
1198
+ bottom: -0px;
1199
+ }
1200
+ }
1201
+ }
1202
+ }
1203
+
1204
+
1205
+ /*拖拽线*/
1206
+ .vxe-table--resizable-row-bar,
1207
+ .vxe-table--resizable-col-bar {
1208
+ display: none;
1209
+ position: absolute;
1210
+ top: 0;
1211
+ left: 0;
1212
+ z-index: 13;
1213
+ pointer-events: none;
1214
+ user-select: none;
1215
+ &:before {
1216
+ content: "";
1217
+ display: block;
1218
+ background-color: var(--vxe-ui-table-resizable-drag-line-color);
1219
+ }
1220
+ .vxe-table--resizable-number-tip {
1221
+ position: absolute;
1222
+ padding: 0.25em 0.25em;
1223
+ font-size: 12px;
1224
+ border-radius: var(--vxe-ui-border-radius);
1225
+ white-space: nowrap;
1226
+ color: #ffffff;
1227
+ background-color: var(--vxe-ui-table-resizable-drag-line-color);
1228
+ user-select: none;
1229
+ pointer-events: none;
1230
+ }
1231
+ }
1232
+ /*列宽线*/
1233
+ .vxe-table--resizable-col-bar {
1234
+ width: 1px;
1235
+ height: 100%;
1236
+ cursor: col-resize;
1237
+ &:before {
1238
+ width: 1px;
1239
+ height: 100%;
1240
+ }
1241
+ .vxe-table--resizable-number-tip {
1242
+ left: 0;
1243
+ top: 1em;
1244
+ }
1245
+ }
1246
+ // 行高线
1247
+ .vxe-table--resizable-row-bar {
1248
+ height: 1px;
1249
+ width: 100%;
1250
+ cursor: row-resize;
1251
+ &:before {
1252
+ height: 1px;
1253
+ width: 100%;
1254
+ }
1255
+ .vxe-table--resizable-number-tip {
1256
+ top: 0;
1257
+ left: 0;
1258
+ }
1259
+ }
1260
+
1261
+ /*拖拽行与列*/
1262
+ .vxe-table--drag-col-line,
1263
+ .vxe-table--drag-row-line {
1264
+ display: none;
1265
+ position: absolute;
1266
+ top: 0;
1267
+ left: 0;
1268
+ z-index: 11;
1269
+ pointer-events: none;
1270
+ }
1271
+ .vxe-table--drag-row-line {
1272
+ width: 100%;
1273
+ height: 1px;
1274
+ border: 2px solid transparent;
1275
+ &[drag-pos="top"] {
1276
+ border-top-color: var(--vxe-ui-font-primary-color);
1277
+ }
1278
+ &[drag-pos="bottom"] {
1279
+ border-bottom-color: var(--vxe-ui-font-primary-color);
1280
+ }
1281
+ &[drag-to-child="y"] {
1282
+ border-top-color: transparent;
1283
+ border-bottom-color: transparent;
1284
+ border-left-color: var(--vxe-ui-status-success-color);
1285
+ }
1286
+ &.is--guides {
1287
+ background-color: var( --vxe-ui-table-drag-over-background-color);
1288
+ }
1289
+ }
1290
+ .vxe-table--drag-col-line {
1291
+ height: 100%;
1292
+ width: 1px;
1293
+ border: 2px solid transparent;
1294
+ &[drag-pos="left"] {
1295
+ border-left-color: var(--vxe-ui-font-primary-color);
1296
+ }
1297
+ &[drag-pos="right"] {
1298
+ border-right-color: var(--vxe-ui-font-primary-color);
1299
+ }
1300
+ &[drag-to-child="y"] {
1301
+ border-left-color: transparent;
1302
+ border-right-color: transparent;
1303
+ border-bottom-color: var(--vxe-ui-status-success-color);
1304
+ }
1305
+ &.is--guides {
1306
+ background-color: var( --vxe-ui-table-drag-over-background-color);
1307
+ }
1308
+ }
1309
+ .vxe-body--row-list-move {
1310
+ transition-property: transform;
1311
+ transition-duration: 0.35s;
1312
+ }
1313
+ .vxe-table--drag-sort-tip {
1314
+ display: none;
1315
+ position: absolute;
1316
+ top: 0;
1317
+ left: 0;
1318
+ padding: 0.6em 1.4em;
1319
+ max-width: 50%;
1320
+ min-width: 100px;
1321
+ border-radius: var(--vxe-ui-border-radius);
1322
+ overflow: hidden;
1323
+ text-overflow: ellipsis;
1324
+ white-space: nowrap;
1325
+ user-select: none;
1326
+ pointer-events: none;
1327
+ background-color: var(--vxe-ui-layout-background-color);
1328
+ box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
1329
+ z-index: 33;
1330
+ &[drag-status="normal"] {
1331
+ .vxe-table--drag-sort-tip-normal-status {
1332
+ display: block;
1333
+ }
1334
+ }
1335
+ &[drag-status="sub"] {
1336
+ .vxe-table--drag-sort-tip-sub-status {
1337
+ display: block;
1338
+ }
1339
+ }
1340
+ &[drag-status="disabled"] {
1341
+ .vxe-table--drag-sort-tip-disabled-status {
1342
+ display: block;
1343
+ }
1344
+ }
1345
+ }
1346
+ .vxe-table--drag-sort-tip-wrapper {
1347
+ display: flex;
1348
+ flex-direction: row;
1349
+ align-items: center;
1350
+ }
1351
+ .vxe-table--drag-sort-tip-status {
1352
+ padding-right: 0.4em;
1353
+ }
1354
+ .vxe-table--drag-sort-tip-disabled-status {
1355
+ display: none;
1356
+ flex-shrink: 0;
1357
+ color: var(--vxe-ui-status-error-color)
1358
+ }
1359
+ .vxe-table--drag-sort-tip-normal-status,
1360
+ .vxe-table--drag-sort-tip-sub-status {
1361
+ display: none;
1362
+ }
1363
+ .vxe-table--drag-sort-tip-content {
1364
+ flex-grow: 1;
1365
+ overflow: hidden;
1366
+ text-overflow: ellipsis;
1367
+ white-space: nowrap;
1368
+ }
1369
+
1370
+ /*table*/
1371
+ .vxe-table--render-default {
1372
+ position: relative;
1373
+ font-size: var(--vxe-ui-font-size-default);
1374
+ color: var(--vxe-ui-font-color);
1375
+ font-family: var(--vxe-ui-font-family);
1376
+ direction: ltr;
1377
+ .vxe-table--body-wrapper {
1378
+ background-color: var(--vxe-ui-layout-background-color);
1379
+ }
1380
+ .vxe-table--footer-wrapper {
1381
+ margin-top: calc(var(--vxe-ui-table-border-width) * -1);
1382
+ background-color: var(--vxe-ui-table-footer-background-color);
1383
+ }
1384
+ .vxe-table--header,
1385
+ .vxe-table--body,
1386
+ .vxe-table--footer {
1387
+ border: 0;
1388
+ border-spacing: 0;
1389
+ border-collapse: separate;
1390
+ table-layout: fixed;
1391
+ }
1392
+ &:not(.is--empty) {
1393
+ &.is--footer {
1394
+ &.is--scroll-x {
1395
+ .vxe-table--body-wrapper {
1396
+ outline: 0;
1397
+ }
1398
+ }
1399
+ }
1400
+ }
1401
+ &.col-drag--resize {
1402
+ .vxe-table--main-wrapper,
1403
+ .vxe-table--fixed-left-wrapper,
1404
+ .vxe-table--fixed-right-wrapper {
1405
+ * {
1406
+ cursor: col-resize;
1407
+ }
1408
+ }
1409
+ }
1410
+ &.row-drag--resize {
1411
+ .vxe-table--main-wrapper,
1412
+ .vxe-table--fixed-left-wrapper,
1413
+ .vxe-table--fixed-right-wrapper {
1414
+ * {
1415
+ cursor: row-resize;
1416
+ }
1417
+ }
1418
+ }
1419
+ &.drag--range,
1420
+ &.drag--area {
1421
+ .vxe-table--main-wrapper,
1422
+ .vxe-table--fixed-left-wrapper,
1423
+ .vxe-table--fixed-right-wrapper {
1424
+ * {
1425
+ cursor: default;
1426
+ }
1427
+ }
1428
+ }
1429
+ &.drag--extend-range {
1430
+ .vxe-table--main-wrapper,
1431
+ .vxe-table--fixed-left-wrapper,
1432
+ .vxe-table--fixed-right-wrapper {
1433
+ * {
1434
+ cursor: crosshair;
1435
+ }
1436
+ }
1437
+ }
1438
+ &.col--drag-cell {
1439
+ .vxe-header--column {
1440
+ user-select: none;
1441
+ &.is--drag-active {
1442
+ cursor: grab;
1443
+ &:active {
1444
+ cursor: grabbing;
1445
+ }
1446
+ &:hover {
1447
+ color: var(--vxe-ui-font-primary-color);
1448
+ }
1449
+ }
1450
+ &.is--drag-disabled {
1451
+ color: var(--vxe-ui-input-disabled-color);
1452
+ cursor: not-allowed;
1453
+ }
1454
+ }
1455
+ }
1456
+ &.header-cell--area {
1457
+ .vxe-table--header-wrapper {
1458
+ user-select: none;
1459
+ }
1460
+ }
1461
+ &.body-cell--area {
1462
+ .vxe-table--body-wrapper {
1463
+ user-select: none;
1464
+ }
1465
+ }
1466
+ &.drag--range {
1467
+ .vxe-body--column {
1468
+ user-select: none;
1469
+ }
1470
+ }
1471
+ &.checkbox--range {
1472
+ .vxe-body--column {
1473
+ &.col--checkbox {
1474
+ user-select: none;
1475
+ }
1476
+ }
1477
+ }
1478
+ .vxe-header--column,
1479
+ .vxe-body--column,
1480
+ .vxe-footer--column {
1481
+ position: relative;
1482
+ line-height: var(--vxe-ui-table-row-line-height);
1483
+ text-align: left;
1484
+ &.col--center {
1485
+ text-align: center;
1486
+ & > .vxe-cell {
1487
+ justify-content: center;
1488
+ }
1489
+ }
1490
+ &.col--right {
1491
+ text-align: right;
1492
+ & > .vxe-cell {
1493
+ justify-content: right;
1494
+ }
1495
+ }
1496
+ }
1497
+ .vxe-header--column {
1498
+ &.col--ellipsis {
1499
+ &.col--center {
1500
+ .vxe-cell--wrapper {
1501
+ justify-content: center;
1502
+ }
1503
+ }
1504
+ &.col--right {
1505
+ .vxe-cell--wrapper {
1506
+ justify-content: right;
1507
+ }
1508
+ }
1509
+ }
1510
+ }
1511
+ .vxe-header--column,
1512
+ .vxe-footer--column {
1513
+ &.col--ellipsis {
1514
+ &.col--center {
1515
+ .vxe-cell{
1516
+ justify-content: center;
1517
+ }
1518
+ }
1519
+ &.col--right {
1520
+ .vxe-cell{
1521
+ justify-content: flex-end;
1522
+ }
1523
+ }
1524
+ }
1525
+ }
1526
+
1527
+ // 行高亮
1528
+ .vxe-body--row {
1529
+ &.row--stripe {
1530
+ & > .vxe-body--column {
1531
+ background-color: var(--vxe-ui-table-row-striped-background-color);
1532
+ }
1533
+ }
1534
+ }
1535
+
1536
+ // 列高亮
1537
+ &.column--highlight {
1538
+ .vxe-header--column {
1539
+ &:hover {
1540
+ background-color: var(--vxe-ui-table-column-hover-background-color);
1541
+ &.col--current {
1542
+ background-color: var(--vxe-ui-table-column-hover-current-background-color);
1543
+ }
1544
+ }
1545
+ }
1546
+ }
1547
+ .vxe-header--column,
1548
+ .vxe-body--column,
1549
+ .vxe-footer--column {
1550
+ position: relative;
1551
+ line-height: var(--vxe-ui-table-row-line-height);
1552
+ text-align: left;
1553
+ &.col--current {
1554
+ background-color: var(--vxe-ui-table-column-current-background-color);
1555
+ // .vxe-cell--tree-btn {
1556
+ // background-color: var(--vxe-ui-table-column-current-background-color);
1557
+ // }
1558
+ }
1559
+ }
1560
+ // &.is--tree-line {
1561
+ // .vxe-header--column,
1562
+ // .vxe-body--column,
1563
+ // .vxe-footer--column {
1564
+ // &.col--current {
1565
+ // .vxe-cell--tree-btn {
1566
+ // background-color: var(--vxe-ui-table-column-current-background-color);
1567
+ // }
1568
+ // }
1569
+ // }
1570
+ // }
1571
+
1572
+ // 行高亮
1573
+ .vxe-body--row {
1574
+ &.row--radio {
1575
+ & > .vxe-body--column {
1576
+ background-color: var(--vxe-ui-table-row-radio-checked-background-color);
1577
+ }
1578
+ }
1579
+ &.row--checked {
1580
+ & > .vxe-body--column {
1581
+ background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
1582
+ }
1583
+ }
1584
+ &.row--current {
1585
+ & > .vxe-body--column {
1586
+ background-color: var(--vxe-ui-table-row-current-background-color);
1587
+ }
1588
+ }
1589
+ &.row--hover {
1590
+ & > .vxe-body--column {
1591
+ background-color: var(--vxe-ui-table-row-hover-background-color);
1592
+ &.col--current {
1593
+ background-color: var(--vxe-ui-table-column-current-background-color);
1594
+ }
1595
+ }
1596
+ &.row--stripe {
1597
+ & > .vxe-body--column {
1598
+ background-color: var(--vxe-ui-table-row-hover-striped-background-color);
1599
+ }
1600
+ }
1601
+ &.row--radio {
1602
+ & > .vxe-body--column {
1603
+ background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
1604
+ }
1605
+ }
1606
+ &.row--checked {
1607
+ & > .vxe-body--column {
1608
+ background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
1609
+ }
1610
+ }
1611
+ &.row--current {
1612
+ & > .vxe-body--column {
1613
+ background-color: var(--vxe-ui-table-row-hover-current-background-color);
1614
+ }
1615
+ }
1616
+ }
1617
+ }
1618
+ // &.is--tree-line {
1619
+ // .vxe-body--row {
1620
+ // &.row--stripe {
1621
+ // .vxe-cell--tree-btn {
1622
+ // background-color: var(--vxe-ui-table-row-striped-background-color);
1623
+ // }
1624
+ // }
1625
+ // &.row--radio {
1626
+ // .vxe-cell--tree-btn {
1627
+ // background-color: var(--vxe-ui-table-row-radio-checked-background-color);
1628
+ // }
1629
+ // }
1630
+ // &.row--checked {
1631
+ // .vxe-cell--tree-btn {
1632
+ // background-color: var(--vxe-ui-table-row-checkbox-checked-background-color);
1633
+ // }
1634
+ // }
1635
+ // &.row--current {
1636
+ // .vxe-cell--tree-btn {
1637
+ // background-color: var(--vxe-ui-table-row-current-background-color);
1638
+ // }
1639
+ // }
1640
+ // &.row--hover {
1641
+ // .vxe-cell--tree-btn {
1642
+ // background-color: var(--vxe-ui-table-row-hover-background-color);
1643
+ // }
1644
+ // &.row--stripe {
1645
+ // .vxe-cell--tree-btn {
1646
+ // background-color: var(--vxe-ui-table-row-hover-striped-background-color);
1647
+ // }
1648
+ // }
1649
+ // &.row--radio {
1650
+ // .vxe-cell--tree-btn {
1651
+ // background-color: var(--vxe-ui-table-row-hover-radio-checked-background-color);
1652
+ // }
1653
+ // }
1654
+ // &.row--checked {
1655
+ // .vxe-cell--tree-btn {
1656
+ // background-color: var(--vxe-ui-table-row-hover-checkbox-checked-background-color);
1657
+ // }
1658
+ // }
1659
+ // &.row--current {
1660
+ // .vxe-cell--tree-btn {
1661
+ // background-color: var(--vxe-ui-table-row-hover-current-background-color);
1662
+ // }
1663
+ // }
1664
+ // }
1665
+ // }
1666
+ // }
1667
+
1668
+ /*边框*/
1669
+ &.border--default,
1670
+ &.border--full,
1671
+ &.border--outer,
1672
+ &.border--inner {
1673
+ &.sy-pos--right {
1674
+ .vxe-table--scroll-y-top-corner {
1675
+ background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1676
+ background-repeat: no-repeat;
1677
+ background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1678
+ background-position: left top, left bottom;
1679
+ }
1680
+ .vxe-table--scroll-y-bottom-corner {
1681
+ background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1682
+ background-repeat: no-repeat;
1683
+ background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1684
+ background-position: left top, left top;
1685
+ }
1686
+ }
1687
+ &.sy-pos--left {
1688
+ .vxe-table--scroll-y-top-corner {
1689
+ background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1690
+ background-repeat: no-repeat;
1691
+ background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1692
+ background-position: right top, left bottom;
1693
+ }
1694
+ .vxe-table--scroll-y-bottom-corner {
1695
+ background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1696
+ background-repeat: no-repeat;
1697
+ background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1698
+ background-position: right top, left top;
1699
+ }
1700
+ }
1701
+ .vxe-table--scroll-x-handle-appearance {
1702
+ position: absolute;
1703
+ left: 0;
1704
+ width: 100%;
1705
+ height: 100%;
1706
+ z-index: 1;
1707
+ pointer-events: none;
1708
+ }
1709
+ &.sx-pos--top {
1710
+ .vxe-table--scroll-x-handle-appearance {
1711
+ top: 0;
1712
+ border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1713
+ }
1714
+ }
1715
+ &.sx-pos--bottom {
1716
+ .vxe-table--scroll-x-handle-appearance {
1717
+ bottom: 0;
1718
+ height: calc(100% + var(--vxe-ui-table-border-width));
1719
+ border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1720
+ }
1721
+ }
1722
+ }
1723
+ &.border--default,
1724
+ &.border--none,
1725
+ &.border--outer,
1726
+ &.border--inner {
1727
+ .vxe-cell--col-resizable {
1728
+ &:before,
1729
+ &:after {
1730
+ content: "";
1731
+ display: inline-block;
1732
+ vertical-align: middle;
1733
+ }
1734
+ &:before {
1735
+ width: 1px;
1736
+ height: 50%;
1737
+ background-color: var(--vxe-ui-table-resizable-line-color);
1738
+ }
1739
+ &:after {
1740
+ width: 0;
1741
+ height: 100%;
1742
+ }
1743
+ }
1744
+ }
1745
+ &.border--default,
1746
+ &.border--full,
1747
+ &.border--outer {
1748
+ .vxe-table--header-wrapper {
1749
+ background-color: var(--vxe-ui-table-header-background-color);
1750
+ }
1751
+ }
1752
+ &.border--default,
1753
+ &.border--inner {
1754
+ .vxe-header--column,
1755
+ .vxe-body--column,
1756
+ .vxe-footer--column {
1757
+ background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1758
+ background-repeat: no-repeat;
1759
+ background-size: 100% var(--vxe-ui-table-border-width);
1760
+ background-position: right bottom;
1761
+ }
1762
+ }
1763
+ &.border--default,
1764
+ &.border--full,
1765
+ &.border--inner {
1766
+ .vxe-table--footer-wrapper {
1767
+ border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1768
+ }
1769
+ }
1770
+ &.border--default,
1771
+ &.border--full {
1772
+ .vxe-table--scroll-y-handle-appearance {
1773
+ position: absolute;
1774
+ top: 0;
1775
+ width: 100%;
1776
+ height: 100%;
1777
+ z-index: 1;
1778
+ pointer-events: none;
1779
+ }
1780
+ &.sy-pos--left {
1781
+ .vxe-table--scroll-y-handle-appearance {
1782
+ left: 0;
1783
+ border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1784
+ }
1785
+ }
1786
+ &.sy-pos--right {
1787
+ .vxe-table--scroll-y-handle-appearance {
1788
+ right: 0;
1789
+ width: calc(100% + var(--vxe-ui-table-border-width));
1790
+ border-left: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
1791
+ }
1792
+ }
1793
+ }
1794
+ &.border--full {
1795
+ .vxe-header--column,
1796
+ .vxe-body--column,
1797
+ .vxe-footer--column {
1798
+ background-image: linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color)), linear-gradient(var(--vxe-ui-table-border-color), var(--vxe-ui-table-border-color));
1799
+ background-repeat: no-repeat;
1800
+ background-size: var(--vxe-ui-table-border-width) 100%, 100% var(--vxe-ui-table-border-width);
1801
+ background-position: right top, right bottom;
1802
+ }
1803
+ .vxe-table--fixed-left-wrapper {
1804
+ // border-right: 1px solid var(--vxe-ui-table-border-color);
1805
+ .vxe-body--column{
1806
+ border-right-color: var(--vxe-ui-table-border-color);
1807
+ }
1808
+ }
1809
+ }
1810
+ &.border--inner,
1811
+ &.border--none {
1812
+ .vxe-table--header-wrapper {
1813
+ background-color: var(--vxe-ui-table-header-background-color);
1814
+ }
1815
+ .vxe-table--fixed-left-wrapper {
1816
+ border-right: 0;
1817
+ }
1818
+ }
1819
+ &.border--inner {
1820
+ .vxe-table--border-line {
1821
+ border-width: 0 0 1px 0;
1822
+ }
1823
+ }
1824
+ &.border--none {
1825
+ .vxe-table--border-line {
1826
+ display: none;
1827
+ }
1828
+ }
1829
+
1830
+ &.size--medium {
1831
+ font-size: var(--vxe-ui-font-size-medium);
1832
+ .vxe-table--empty-placeholder,
1833
+ .vxe-table--empty-block {
1834
+ min-height: var(--vxe-ui-table-row-height-medium);
1835
+ }
1836
+ .vxe-header--column,
1837
+ .vxe-body--column,
1838
+ .vxe-footer--column {
1839
+ &.is--padding {
1840
+ .vxe-cell {
1841
+ padding: var(--vxe-ui-table-cell-padding-medium);
1842
+ .vxe-default-textarea {
1843
+ padding: var(--vxe-ui-table-cell-padding-medium);
1844
+ }
1845
+ }
1846
+ }
1847
+ }
1848
+ .vxe-cell {
1849
+ .vxe-default-input,
1850
+ .vxe-default-textarea,
1851
+ .vxe-default-select {
1852
+ height: var(--vxe-ui-input-height-medium);
1853
+ }
1854
+ .vxe-default-input {
1855
+ &[type="date"]::-webkit-inner-spin-button {
1856
+ margin-top: 3px;
1857
+ }
1858
+ }
1859
+ }
1860
+ .vxe-cell--valid-error-tip {
1861
+ padding: 0 var(--vxe-ui-table-cell-padding-medium);
1862
+ }
1863
+ }
1864
+ &.size--small {
1865
+ font-size: var(--vxe-ui-font-size-small);
1866
+ .vxe-table--empty-placeholder,
1867
+ .vxe-table--empty-block {
1868
+ min-height: var(--vxe-ui-table-row-height-small);
1869
+ }
1870
+ .vxe-header--column,
1871
+ .vxe-body--column,
1872
+ .vxe-footer--column {
1873
+ &.is--padding {
1874
+ .vxe-cell {
1875
+ padding: var(--vxe-ui-table-cell-padding-small);
1876
+ .vxe-default-textarea {
1877
+ padding: var(--vxe-ui-table-cell-padding-small);
1878
+ }
1879
+ }
1880
+ }
1881
+ }
1882
+ .vxe-cell {
1883
+ .vxe-default-input,
1884
+ .vxe-default-textarea,
1885
+ .vxe-default-select {
1886
+ height: var(--vxe-ui-input-height-small);
1887
+ }
1888
+ .vxe-default-input {
1889
+ &[type="date"]::-webkit-inner-spin-button {
1890
+ margin-top: 2px;
1891
+ }
1892
+ }
1893
+ }
1894
+ .vxe-cell--valid-error-tip {
1895
+ padding: 0 var(--vxe-ui-table-cell-padding-small);
1896
+ }
1897
+ }
1898
+ &.size--mini {
1899
+ font-size: var(--vxe-ui-font-size-mini);
1900
+ .vxe-table--empty-placeholder,
1901
+ .vxe-table--empty-block {
1902
+ min-height: var(--vxe-ui-table-row-height-mini);
1903
+ }
1904
+ .vxe-header--column,
1905
+ .vxe-body--column,
1906
+ .vxe-footer--column {
1907
+ &.is--padding {
1908
+ .vxe-cell {
1909
+ padding: var(--vxe-ui-table-cell-padding-mini);
1910
+ .vxe-default-textarea {
1911
+ padding: var(--vxe-ui-table-cell-padding-mini);
1912
+ }
1913
+ }
1914
+ }
1915
+ }
1916
+ .vxe-cell {
1917
+ .vxe-default-input,
1918
+ .vxe-default-textarea,
1919
+ .vxe-default-select {
1920
+ height: var(--vxe-ui-input-height-mini);
1921
+ }
1922
+ .vxe-default-input {
1923
+ &[type="date"]::-webkit-inner-spin-button {
1924
+ margin-top: 1px;
1925
+ }
1926
+ }
1927
+ }
1928
+ .vxe-cell--valid-error-tip {
1929
+ padding: 0 var(--vxe-ui-table-cell-padding-mini);
1930
+ }
1931
+ }
1932
+
1933
+ .vxe-header--column,
1934
+ .vxe-body--column,
1935
+ .vxe-footer--column {
1936
+ &.is--padding {
1937
+ .vxe-cell {
1938
+ padding: var(--vxe-ui-table-cell-padding-default);
1939
+ .vxe-default-textarea {
1940
+ padding: var(--vxe-ui-table-cell-padding-default);
1941
+ }
1942
+ }
1943
+ }
1944
+ }
1945
+
1946
+ .vxe-cell {
1947
+ white-space: pre-line;
1948
+ word-break: break-all;
1949
+ }
1950
+
1951
+ // 单元格占位符
1952
+ .vxe-cell--placeholder {
1953
+ color: var(--vxe-ui-table-cell-placeholder-color);
1954
+ }
1955
+
1956
+ // 单选框和复选框
1957
+ .vxe-cell--radio {
1958
+ @include baseMixin.createRadioIcon();
1959
+ }
1960
+ .vxe-cell--checkbox {
1961
+ @include baseMixin.createCheckboxIcon();
1962
+ }
1963
+
1964
+ .fixed--hidden {
1965
+ visibility: hidden;
1966
+ }
1967
+ .vxe-table--fixed-left-wrapper,
1968
+ .vxe-table--fixed-right-wrapper {
1969
+ width: 100%;
1970
+ position: absolute;
1971
+ top: 0;
1972
+ z-index: 5;
1973
+ overflow: hidden;
1974
+ background-color: inherit;
1975
+ transition: 0.3s box-shadow;
1976
+ outline: 0;
1977
+ background-color: var(--vxe-ui-layout-background-color);
1978
+ &.y-ob--contain {
1979
+ & > .vxe-table--body-wrapper {
1980
+ & > .vxe-table--body-inner-wrapper {
1981
+ overscroll-behavior-y: contain;
1982
+ }
1983
+ }
1984
+ }
1985
+ .vxe-table--body-wrapper {
1986
+ outline: 0;
1987
+ }
1988
+ }
1989
+ .vxe-table--fixed-left-wrapper {
1990
+ .vxe-table--body-wrapper {
1991
+ width: calc(100% + 40px);
1992
+ }
1993
+ }
1994
+ &.is--header {
1995
+ .vxe-table--fixed-left-wrapper,
1996
+ .vxe-table--fixed-right-wrapper {
1997
+ .vxe-table--body-wrapper {
1998
+ &:before {
1999
+ display: none;
2000
+ }
2001
+ }
2002
+ }
2003
+ }
2004
+ .vxe-table--fixed-left-wrapper {
2005
+ left: 0;
2006
+ width: 200px;
2007
+ &.scrolling--middle {
2008
+ box-shadow: var(--vxe-ui-table-fixed-left-scrolling-box-shadow);
2009
+ }
2010
+ }
2011
+ .vxe-table--fixed-right-wrapper {
2012
+ right: 0;
2013
+ &.scrolling--middle {
2014
+ box-shadow: var(--vxe-ui-table-fixed-right-scrolling-box-shadow);
2015
+ }
2016
+ }
2017
+ .vxe-table--header-wrapper,
2018
+ .vxe-table--body-wrapper,
2019
+ .vxe-table--footer-wrapper {
2020
+ position: relative;
2021
+ width: 100%;
2022
+ &.fixed-left--wrapper,
2023
+ &.fixed-right--wrapper {
2024
+ position: absolute;
2025
+ top: 0;
2026
+ outline: 0;
2027
+ }
2028
+ &.fixed-left--wrapper {
2029
+ left: 0;
2030
+ }
2031
+ &.fixed-right--wrapper {
2032
+ right: 0;
2033
+ }
2034
+ }
2035
+ .vxe-body--x-space {
2036
+ width: 100%;
2037
+ height: 1px;
2038
+ margin-bottom: -1px;
2039
+ }
2040
+ .vxe-body--y-space {
2041
+ width: 0;
2042
+ float: left;
2043
+ }
2044
+
2045
+ /*边框线*/
2046
+ .vxe-table--border-line {
2047
+ position: absolute;
2048
+ top: 0;
2049
+ left: 0;
2050
+ width: 100%;
2051
+ height: 100%;
2052
+ z-index: 10;
2053
+ pointer-events: none;
2054
+ border: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2055
+ }
2056
+
2057
+ /*树形节点*/
2058
+ // &.is--tree-line {
2059
+ // .vxe-body--row {
2060
+ // &:first-child {
2061
+ // .vxe-tree--line {
2062
+ // border-width: 0 0 1px 0;
2063
+ // }
2064
+ // }
2065
+ // }
2066
+ // .vxe-body--row {
2067
+ // .vxe-body--column {
2068
+ // background-image: none;
2069
+ // }
2070
+ // }
2071
+ // }
2072
+ .vxe-tree--line-wrapper {
2073
+ position: relative;
2074
+ display: block;
2075
+ height: 0;
2076
+ }
2077
+ .vxe-tree--line {
2078
+ content: "";
2079
+ position: absolute;
2080
+ bottom: -1.5em;
2081
+ width: 0.8em;
2082
+ border-width: 0 0 1px 1px;
2083
+ border-style: var(--vxe-ui-table-tree-node-line-style);
2084
+ border-color: var(--vxe-ui-table-tree-node-line-color);
2085
+ pointer-events: none;
2086
+ }
2087
+ .vxe-row-group--tree-node,
2088
+ .vxe-cell--tree-node {
2089
+ position: relative;
2090
+ }
2091
+ .vxe-cell--tree-btn {
2092
+ &:hover {
2093
+ color: var(--vxe-ui-font-color);
2094
+ }
2095
+ & > i {
2096
+ display: block;
2097
+ color: var(--vxe-ui-font-lighten-color);
2098
+ @include baseMixin.createAnimationTransition(transform);
2099
+ // background-color: var(--vxe-ui-layout-background-color); // 影响选择行相关
2100
+ }
2101
+ }
2102
+ .vxe-row-group-cell,
2103
+ .vxe-tree-cell {
2104
+ display: block;
2105
+ padding-left: 1.5em;
2106
+ }
2107
+ .vxe-cell--tree-btn,
2108
+ .vxe-row-group--node-btn{
2109
+ position: absolute;
2110
+ top: 50%;
2111
+ width: 1em;
2112
+ height: 1em;
2113
+ text-align: center;
2114
+ transform: translateY(-50%);
2115
+ z-index: 1;
2116
+ user-select: none;
2117
+ cursor: pointer;
2118
+ }
2119
+
2120
+ /*行分组*/
2121
+ .vxe-row-group--node-btn {
2122
+ &:hover {
2123
+ color: var(--vxe-ui-font-color);
2124
+ }
2125
+ & > i {
2126
+ display: block;
2127
+ color: var(--vxe-ui-font-lighten-color);
2128
+ @include baseMixin.createAnimationTransition(transform);
2129
+ }
2130
+ }
2131
+
2132
+ /*单元格高度*/
2133
+ .vxe-body--column {
2134
+ &.col--ellipsis {
2135
+ & > .vxe-cell {
2136
+ .vxe-row-group-cell,
2137
+ .vxe-tree-cell {
2138
+ overflow: hidden;
2139
+ text-overflow: ellipsis;
2140
+ white-space: nowrap;
2141
+ }
2142
+ }
2143
+ }
2144
+ &.col--cs-height,
2145
+ &.col--rs-height,
2146
+ &.col--auto-height {
2147
+ overflow: hidden;
2148
+ &.col--tree-node,
2149
+ &.col--valid-error {
2150
+ overflow: unset;
2151
+ }
2152
+ & > .vxe-cell {
2153
+ overflow: hidden;
2154
+ }
2155
+ }
2156
+ & > .vxe-cell {
2157
+ display: flex;
2158
+ flex-direction: row;
2159
+ align-items: center;
2160
+ }
2161
+ }
2162
+ /*溢出列*/
2163
+ .vxe-header--column,
2164
+ .vxe-body--column,
2165
+ .vxe-footer--column {
2166
+ &:not(.col--active) {
2167
+ &.col--ellipsis {
2168
+ & > .vxe-cell {
2169
+ overflow: hidden;
2170
+ & > .vxe-cell--wrapper {
2171
+ overflow: hidden;
2172
+ text-overflow: ellipsis;
2173
+ white-space: nowrap;
2174
+ }
2175
+ }
2176
+ }
2177
+ &.vxe-row-group-cell,
2178
+ &.vxe-tree-cell,
2179
+ &.col--vertical-top {
2180
+ & > .vxe-cell {
2181
+ & > .vxe-cell--wrapper {
2182
+ white-space: pre-line;
2183
+ }
2184
+ }
2185
+ }
2186
+ }
2187
+ }
2188
+ .vxe-header--column,
2189
+ .vxe-footer--column {
2190
+ &.col--ellipsis {
2191
+ & > .vxe-cell {
2192
+ .vxe-cell--wrapper {
2193
+ overflow: hidden;
2194
+ text-overflow: ellipsis;
2195
+ white-space: nowrap;
2196
+ }
2197
+ }
2198
+ }
2199
+ & > .vxe-cell {
2200
+ display: flex;
2201
+ flex-direction: row;
2202
+ align-items: center;
2203
+ }
2204
+ }
2205
+
2206
+ /*展开行*/
2207
+ .vxe-table--row-expanded-wrapper {
2208
+ position: absolute;
2209
+ top: 0;
2210
+ left: 0;
2211
+ width: 100%;
2212
+ height: 100%;
2213
+ overflow: hidden;
2214
+ pointer-events: none;
2215
+ }
2216
+ .vxe-body--row-expanded-cell {
2217
+ position: absolute;
2218
+ z-index: 5;
2219
+ top: 0;
2220
+ left: 0;
2221
+ width: 100%;
2222
+ overflow: auto;
2223
+ border-top: 1px solid transparent;
2224
+ border-bottom: 1px solid transparent;
2225
+ pointer-events: all;
2226
+ &.is--padding {
2227
+ .vxe-body--row-expanded-content {
2228
+ padding: var(--vxe-ui-table-expand-padding-default);
2229
+ }
2230
+ }
2231
+ }
2232
+ .vxe-body--row-expanded-content {
2233
+ background-color: var(--vxe-ui-layout-background-color);
2234
+ }
2235
+ .vxe-body--row-expanded-place-column {
2236
+ border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2237
+ border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2238
+ }
2239
+ .vxe-table--expanded {
2240
+ cursor: pointer;
2241
+ .vxe-table--expand-btn {
2242
+ display: inline-block;
2243
+ width: 1em;
2244
+ height: 1em;
2245
+ text-align: center;
2246
+ user-select: none;
2247
+ color: var(--vxe-ui-font-lighten-color);
2248
+ @include baseMixin.createAnimationTransition(transform);
2249
+ &:hover {
2250
+ color: var(--vxe-ui-font-color);
2251
+ }
2252
+ }
2253
+ &+.vxe-table--expand-label {
2254
+ padding-left: 0.5em;
2255
+ }
2256
+ }
2257
+ .vxe-body--expanded-row {
2258
+ &.is--padding {
2259
+ & > .vxe-body--expanded-column {
2260
+ & > .vxe-body--expanded-cell {
2261
+ padding: var(--vxe-ui-table-expand-padding-default);
2262
+ }
2263
+ }
2264
+ }
2265
+ }
2266
+ .vxe-body--expanded-column {
2267
+ border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2268
+ border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
2269
+ &.col--ellipsis {
2270
+ & > .vxe-body--expanded-cell {
2271
+ overflow: hidden;
2272
+ text-overflow: ellipsis;
2273
+ white-space: nowrap;
2274
+ }
2275
+ }
2276
+ }
2277
+ .vxe-body--expanded-cell {
2278
+ position: relative;
2279
+ z-index: 1;
2280
+ &.is--ellipsis {
2281
+ overflow: auto;
2282
+ outline: 0;
2283
+ }
2284
+ }
2285
+
2286
+ /*拖拽列*/
2287
+ .vxe-table--column {
2288
+ &.col--drag-move {
2289
+ transition: transform 0.5s ease;
2290
+ }
2291
+ &.col--drag-origin {
2292
+ & > .vxe-cell {
2293
+ opacity: 0.3;
2294
+ }
2295
+ }
2296
+ }
2297
+
2298
+ /*拖拽行把柄*/
2299
+ .vxe-cell--drag-handle {
2300
+ user-select: none;
2301
+ & + span {
2302
+ padding-left: 0.5em;
2303
+ }
2304
+ &:not(.is--disabled) {
2305
+ cursor: grab;
2306
+ &:active {
2307
+ cursor: grabbing;
2308
+ }
2309
+ &:hover {
2310
+ color: var(--vxe-ui-font-primary-color);
2311
+ }
2312
+ }
2313
+ &.is--disabled {
2314
+ color: var(--vxe-ui-input-disabled-color);
2315
+ cursor: not-allowed;
2316
+ }
2317
+ }
2318
+
2319
+ .vxe-body--row {
2320
+ &.row--drag-move {
2321
+ transition: transform 0.5s ease;
2322
+ }
2323
+ &.row--drag-origin {
2324
+ & > .vxe-body--column {
2325
+ & > .vxe-cell {
2326
+ opacity: 0.3;
2327
+ }
2328
+ }
2329
+ }
2330
+ }
2331
+ .vxe-body--column {
2332
+ &.is--drag-cell {
2333
+ user-select: none;
2334
+ &:not(.is--drag-disabled) {
2335
+ cursor: grab;
2336
+ &:active {
2337
+ cursor: grabbing;
2338
+ }
2339
+ &:hover {
2340
+ color: var(--vxe-ui-font-primary-color);
2341
+ }
2342
+ }
2343
+ &.is--drag-disabled {
2344
+ color: var(--vxe-ui-input-disabled-color);
2345
+ cursor: not-allowed;
2346
+ }
2347
+ }
2348
+ }
2349
+
2350
+ &.size--medium {
2351
+ .vxe-cell--checkbox {
2352
+ font-size: var(--vxe-checkbox-font-size-medium);
2353
+ }
2354
+ .vxe-cell--radio {
2355
+ font-size: var(--vxe-radio-font-size-medium);
2356
+ }
2357
+ }
2358
+ &.size--small {
2359
+ .vxe-cell--checkbox {
2360
+ font-size: var(--vxe-checkbox-font-size-small);
2361
+ }
2362
+ .vxe-cell--radio {
2363
+ font-size: var(--vxe-radio-font-size-small);
2364
+ }
2365
+ }
2366
+ &.size--mini {
2367
+ .vxe-cell--checkbox {
2368
+ font-size: var(--vxe-checkbox-font-size-mini);
2369
+ }
2370
+ .vxe-cell--radio {
2371
+ font-size: var(--vxe-radio-font-size-mini);
2372
+ }
2373
+ }
2374
+
2375
+ /*暂无数据*/
2376
+ .vxe-table--empty-placeholder,
2377
+ .vxe-table--empty-block {
2378
+ color: var(--vxe-ui-input-placeholder-color);
2379
+ min-height: var(--vxe-ui-table-row-height-default);
2380
+ justify-content: center;
2381
+ align-items: center;
2382
+ text-align: center;
2383
+ overflow: hidden;
2384
+ width: 100%;
2385
+ outline: 0;
2386
+ }
2387
+ .vxe-table--empty-block {
2388
+ display: none;
2389
+ visibility: hidden;
2390
+ pointer-events: none;
2391
+ }
2392
+ .vxe-table--empty-place-wrapper {
2393
+ display: none;
2394
+ position: absolute;
2395
+ width: 100%;
2396
+ top: 0;
2397
+ z-index: 5;
2398
+ overflow: hidden;
2399
+ pointer-events: none;
2400
+ }
2401
+ .vxe-table--empty-placeholder {
2402
+ display: flex;
2403
+ }
2404
+ .vxe-table--empty-content {
2405
+ display: block;
2406
+ width: 50%;
2407
+ pointer-events: auto;
2408
+ }
2409
+ &.is--empty {
2410
+ .vxe-table--empty-block,
2411
+ .vxe-table--empty-place-wrapper{
2412
+ display: flex;
2413
+ }
2414
+ }
2415
+
2416
+ .vxe-body--column {
2417
+ &.col--selected {
2418
+ box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-font-primary-color);
2419
+ }
2420
+ }
2421
+
2422
+ /*校验不通过*/
2423
+ .vxe-body--column {
2424
+ .vxe-cell--valid-error-tip {
2425
+ width: 100%;
2426
+ position: absolute;
2427
+ left: 50%;
2428
+ font-size: 12px;
2429
+ line-height: 1em;
2430
+ transform: translate(-50%, -2px);
2431
+ text-align: left;
2432
+ z-index: 4;
2433
+ padding: 0 var(--vxe-ui-table-cell-padding-default);
2434
+ pointer-events: none;
2435
+ }
2436
+ .vxe-cell--valid-error-wrapper {
2437
+ position: relative;
2438
+ display: inline-block;
2439
+ border-radius: var(--vxe-ui-border-radius);
2440
+ pointer-events: auto;
2441
+ // &::before {
2442
+ // content: "";
2443
+ // position: absolute;
2444
+ // top: -0.75em;
2445
+ // left: 50%;
2446
+ // bottom: auto;
2447
+ // transform: translateX(-50%);
2448
+ // border-width: 0.5em;
2449
+ // border-style: solid;
2450
+ // border-color: transparent transparent var(--vxe-ui-table-validate-error-color) transparent;
2451
+ // }
2452
+ }
2453
+ .vxe-cell--valid-error-theme-beautify {
2454
+ padding: 0.2em 0.6em 0.25em 0.6em;
2455
+ color: #fff;
2456
+ background-color: var(--vxe-ui-table-validate-error-color);
2457
+ .vxe-cell--valid-error-msg {
2458
+ background: transparent;
2459
+ }
2460
+ }
2461
+ .vxe-cell--valid-error-theme-normal {
2462
+ color: var(--vxe-ui-table-validate-error-color);
2463
+ background-color: var(--vxe-ui-table-validate-error-theme-normal-background-color);
2464
+ }
2465
+ &.col--active,
2466
+ &.col--selected {
2467
+ position: relative;
2468
+ }
2469
+ &.col--valid-error {
2470
+ &.show--valid-bg {
2471
+ background-color: var(--vxe-ui-table-validate-error-cell-background-color);
2472
+ }
2473
+ .vxe-default-input,
2474
+ .vxe-default-textarea,
2475
+ .vxe-default-select {
2476
+ border-color: var(--vxe-ui-table-validate-error-color);
2477
+ }
2478
+ .vxe-input,
2479
+ .vxe-ico-picker {
2480
+ border-color: var(--vxe-ui-table-validate-error-color);
2481
+ }
2482
+ }
2483
+ }
2484
+ &.valid-msg--single {
2485
+ .vxe-body--row {
2486
+ &:last-child {
2487
+ .vxe-cell--valid-error-tip {
2488
+ bottom: calc(100%);
2489
+ transform: translate(-50%, 0);
2490
+ // .vxe-cell--valid-error-wrapper {
2491
+ // &::before {
2492
+ // bottom: -0.75em;
2493
+ // top: auto;
2494
+ // border-color: var(--vxe-ui-table-validate-error-color) transparent transparent transparent;
2495
+ // }
2496
+ // }
2497
+ }
2498
+ &:first-child {
2499
+ .vxe-cell--valid-error-tip {
2500
+ bottom: auto;
2501
+ transform: translate(-50%, -2px);
2502
+ // .vxe-cell--valid-error-wrapper {
2503
+ // &::before {
2504
+ // top: -0.75em;
2505
+ // bottom: auto;
2506
+ // border-color: transparent transparent var(--vxe-ui-table-validate-error-color) transparent;
2507
+ // }
2508
+ // }
2509
+ }
2510
+ }
2511
+ }
2512
+ }
2513
+ }
2514
+ &.valid-msg--full {
2515
+ .vxe-body--row {
2516
+ &:last-child {
2517
+ .vxe-cell--valid-error-tip {
2518
+ top: calc(100% - 1.3em);
2519
+ }
2520
+ }
2521
+ }
2522
+ }
2523
+ /*已废弃，旧的校验样式**/
2524
+ &.old-cell-valid {
2525
+ .vxe-body--column {
2526
+ &.col--valid-error {
2527
+ .vxe-cell--valid-error-tip {
2528
+ width: 320px;
2529
+ position: absolute;
2530
+ bottom: calc(100% + 4px);
2531
+ left: 50%;
2532
+ transform: translateX(-50%);
2533
+ text-align: center;
2534
+ pointer-events: none;
2535
+ z-index: 4;
2536
+ .vxe-cell--valid-error-msg {
2537
+ display: inline-block;
2538
+ border-radius: -var(-vxe-border-radius);
2539
+ padding: 8px 12px;
2540
+ color: #fff;
2541
+ background-color: #f56c6c;
2542
+ pointer-events: auto;
2543
+ }
2544
+ // .vxe-cell--valid-error-wrapper {
2545
+ // &::before {
2546
+ // display: none;
2547
+ // }
2548
+ // }
2549
+ }
2550
+ }
2551
+ }
2552
+ .vxe-body--row {
2553
+ &:first-child {
2554
+ .vxe-cell--valid-error-tip {
2555
+ bottom: auto;
2556
+ top: calc(100% + 4px);
2557
+ }
2558
+ }
2559
+ }
2560
+ .vxe-body--column {
2561
+ &:first-child {
2562
+ .vxe-cell--valid-error-tip {
2563
+ left: 10px;
2564
+ transform: translateX(0);
2565
+ text-align: left;
2566
+ }
2567
+ }
2568
+ }
2569
+ }
2570
+
2571
+ /*单元格标记删除状态*/
2572
+ .vxe-body--row {
2573
+ &.row--pending {
2574
+ color: var(--vxe-ui-font-disabled-color);
2575
+ opacity: 0.5;
2576
+ text-decoration: line-through;
2577
+ cursor: no-drop;
2578
+ .vxe-body--column {
2579
+ position: relative;
2580
+ &:after {
2581
+ content: "";
2582
+ position: absolute;
2583
+ top: 50%;
2584
+ left: 0;
2585
+ width: 100%;
2586
+ height: 0;
2587
+ border-bottom: 1px solid var(--vxe-ui-table-validate-error-color);
2588
+ z-index: 1;
2589
+ }
2590
+ }
2591
+ }
2592
+ }
2593
+
2594
+ /*单元格编辑状态*/
2595
+ .vxe-body--row {
2596
+ &.row--new {
2597
+ & > .vxe-body--column {
2598
+ position: relative;
2599
+ &:before {
2600
+ content: "";
2601
+ top: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
2602
+ left: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
2603
+ position: absolute;
2604
+ border-width: var(--vxe-ui-table-cell-dirty-width);
2605
+ border-style: solid;
2606
+ border-color: transparent var(--vxe-ui-table-cell-dirty-insert-color) transparent transparent;
2607
+ transform: rotate(45deg);
2608
+ }
2609
+ }
2610
+ }
2611
+ }
2612
+ .vxe-body--column {
2613
+ &.col--dirty {
2614
+ position: relative;
2615
+ &:before {
2616
+ content: "";
2617
+ top: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
2618
+ left: calc(var(--vxe-ui-table-cell-dirty-width) * -1);
2619
+ position: absolute;
2620
+ border-width: var(--vxe-ui-table-cell-dirty-width);
2621
+ border-style: solid;
2622
+ border-color: transparent var(--vxe-ui-table-cell-dirty-update-color) transparent transparent;
2623
+ transform: rotate(45deg);
2624
+ }
2625
+ }
2626
+ }
2627
+
2628
+ /*可编辑*/
2629
+ &.vxe-editable {
2630
+ &.cell--highlight {
2631
+ .vxe-body--column {
2632
+ &.col--active {
2633
+ box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-font-primary-color);
2634
+ &.col--valid-error {
2635
+ box-shadow: inset 0px 0px 0px 2px var(--vxe-ui-table-validate-error-color);
2636
+ }
2637
+ .vxe-cell {
2638
+ .vxe-default-input,
2639
+ .vxe-default-textarea {
2640
+ border: 0;
2641
+ padding: 0;
2642
+ }
2643
+ .vxe-input {
2644
+ .vxe-input--inner {
2645
+ border: 0;
2646
+ padding-left: 0;
2647
+ }
2648
+ }
2649
+ }
2650
+ }
2651
+ }
2652
+ }
2653
+ .vxe-body--column {
2654
+ padding: 0;
2655
+ }
2656
+ }
2657
+ }
2658
+
2659
+ /*valid error*/
2660
+ div.vxe-table--tooltip-wrapper {
2661
+ &.vxe-table--valid-error {
2662
+ padding: 0;
2663
+ color: var(--vxe-ui-table-validate-error-color);
2664
+ background-color: var(--vxe-ui-table-validate-error-theme-normal-background-color);
2665
+ &.old-cell-valid {
2666
+ padding: 8px 12px;
2667
+ background-color: #f56c6c;
2668
+ color: #fff;
2669
+ }
2670
+ }
2671
+ }
2672
+
2673
+ /*footer*/
2674
+ .vxe-table--footer-wrapper {
2675
+ color: var(--vxe-ui-table-footer-font-color);
2676
+ &.body--wrapper{
2677
+ outline: 0;
2678
+ }
2679
+ }