ele-admin-plus 1.1.7 → 1.1.8-beta.1

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.
@@ -288,6 +288,7 @@ const index = defineComponent({
288
288
  class: [
289
289
  "ele-data-table",
290
290
  { "is-sticky": props.sticky },
291
+ { "hide-header": !props.showHeader },
291
292
  { "hide-bottom-line": !props.bottomLine }
292
293
  ],
293
294
  currentRowKey: void 0,
@@ -21,15 +21,33 @@
21
21
 
22
22
  /* 设置单元格圆角 */
23
23
  @mixin data-table-radius($radius) {
24
- & > .el-table__inner-wrapper > .el-table__header-wrapper {
24
+ & > .el-table__inner-wrapper > .el-table__header-wrapper,
25
+ &.el-table--border > .el-table__inner-wrapper::after,
26
+ &.el-table--border.hide-header
27
+ > .el-table__inner-wrapper
28
+ > .el-table__body-wrapper {
25
29
  border-top-left-radius: $radius;
26
30
  border-top-right-radius: $radius;
27
31
  }
28
32
 
29
- & > .el-table__inner-wrapper > .el-table__footer-wrapper {
33
+ & > .el-table__inner-wrapper > .el-table__footer-wrapper,
34
+ &.el-table--border > .el-table__inner-wrapper::before,
35
+ &.el-table--border:not(.has-footer)
36
+ > .el-table__inner-wrapper
37
+ > .el-table__body-wrapper {
30
38
  border-bottom-left-radius: $radius;
31
39
  border-bottom-right-radius: $radius;
32
40
  }
41
+
42
+ &.el-table--border::before {
43
+ border-bottom-left-radius: $radius;
44
+ border-top-left-radius: $radius;
45
+ }
46
+
47
+ &.el-table--border::after {
48
+ border-bottom-right-radius: $radius;
49
+ border-top-right-radius: $radius;
50
+ }
33
51
  }
34
52
 
35
53
  /* 空状态样式 */
@@ -17,6 +17,14 @@ $ele-expand-path: 'M362 811 662 512 362 213' !default;
17
17
  z-index: 4;
18
18
  }
19
19
 
20
+ /* 底部间距补丁 */
21
+ .ele-data-table.el-table > .el-table__inner-wrapper > .el-table__body-wrapper {
22
+ & > .el-scrollbar > .el-scrollbar__wrap {
23
+ padding-bottom: eleVar('table', 'fix-height');
24
+ box-sizing: border-box;
25
+ }
26
+ }
27
+
20
28
  .ele-data-table {
21
29
  /* 单元格背景 */
22
30
  & > .el-table__inner-wrapper {
@@ -269,27 +277,57 @@ $ele-expand-path: 'M362 811 662 512 362 213' !default;
269
277
  }
270
278
  }
271
279
 
280
+ /* 表尾 */
281
+ & > .el-table__inner-wrapper > .el-table__footer-wrapper {
282
+ border-top: 1px solid eleVar('table', 'border-color');
283
+ margin-top: -1px;
284
+ z-index: 3;
285
+
286
+ td.el-table__cell {
287
+ border-bottom-color: transparent;
288
+ }
289
+ }
290
+
272
291
  /* 边框线 */
273
- &.el-table--border::after,
274
- &.el-table--border::before {
275
- top: 0;
276
- bottom: 0;
277
- width: 0;
278
- border-left: 1px solid eleVar('table', 'border-color');
279
- z-index: 5;
292
+ &.el-table--border,
293
+ &.el-table > .el-table__inner-wrapper {
294
+ &::before,
295
+ &::after {
296
+ background: none;
297
+ position: absolute;
298
+ box-sizing: border-box;
299
+ pointer-events: none;
300
+ z-index: 5;
301
+ }
280
302
  }
281
303
 
282
304
  &.el-table > .el-table__inner-wrapper::before,
283
- &.el-table--border > .el-table__inner-wrapper::after {
305
+ &.el-table > .el-table__inner-wrapper::after {
306
+ left: 0;
284
307
  right: 0;
285
- height: 0;
308
+ width: 100%;
309
+ height: calc(1px + #{eleVar('table', 'radius')});
310
+ }
311
+
312
+ &.el-table > .el-table__inner-wrapper::before {
313
+ content: '';
314
+ bottom: 0;
315
+ border-bottom: 1px solid eleVar('table', 'border-color');
316
+ }
317
+
318
+ &.el-table.el-table--border > .el-table__inner-wrapper::after,
319
+ &.el-table.hide-header > .el-table__inner-wrapper::after {
320
+ content: '';
321
+ top: 0;
286
322
  border-top: 1px solid eleVar('table', 'border-color');
287
- z-index: 5;
288
323
  }
289
324
 
290
- &.el-table:not(.has-footer) > .el-table__inner-wrapper::before {
291
- bottom: eleVar('table', 'fix-height');
292
- box-shadow: 0 0.8px 0 eleVar('table', 'tr-bg');
325
+ &.el-table--border > .el-table__inner-wrapper {
326
+ &::before,
327
+ &::after {
328
+ border-right: 1px solid transparent;
329
+ border-left: 1px solid transparent;
330
+ }
293
331
  }
294
332
 
295
333
  & > .el-table__inner-wrapper > .el-table__border-left-patch,
@@ -298,32 +336,51 @@ $ele-expand-path: 'M362 811 662 512 362 213' !default;
298
336
  display: none;
299
337
  }
300
338
 
301
- & > .el-table__inner-wrapper > .el-table__footer-wrapper td.el-table__cell {
302
- border-bottom-color: transparent;
339
+ /* 全边框 */
340
+ &.el-table--border {
341
+ &::before,
342
+ &::after {
343
+ content: '';
344
+ top: 0;
345
+ bottom: 0;
346
+ height: 100%;
347
+ width: calc(1px + #{eleVar('table', 'radius')});
348
+ border-bottom: 1px solid transparent;
349
+ border-top: 1px solid transparent;
350
+ }
351
+
352
+ &::before {
353
+ left: 0;
354
+ border-left: 1px solid eleVar('table', 'border-color');
355
+ }
356
+
357
+ &::after {
358
+ right: 0;
359
+ border-right: 1px solid eleVar('table', 'border-color');
360
+ }
303
361
  }
304
362
 
305
- & > .el-table__inner-wrapper > .el-table__footer-wrapper {
306
- margin-top: -1px;
363
+ /* 适配底部间距补丁 */
364
+ &.el-table:not(.has-footer) > .el-table__inner-wrapper::before {
365
+ bottom: eleVar('table', 'fix-height');
366
+ box-shadow: 0 0.8px 0 eleVar('table', 'tr-bg');
307
367
  }
308
368
 
309
- &.el-table > .el-table__inner-wrapper > .el-table__body-wrapper {
310
- & > .el-scrollbar > .el-scrollbar__wrap {
311
- padding-bottom: eleVar('table', 'fix-height');
312
- box-sizing: border-box;
313
- }
369
+ &.el-table--border:not(.has-footer)::before,
370
+ &.el-table--border:not(.has-footer)::after {
371
+ bottom: eleVar('table', 'fix-height');
372
+ height: auto;
314
373
  }
315
374
 
316
375
  /* 圆角 */
317
- &:not(.el-table--border) {
318
- @include data-table-radius(eleVar('table', 'radius'));
376
+ @include data-table-radius(eleVar('table', 'radius'));
319
377
 
320
- &.el-table--large {
321
- @include data-table-radius(eleVar('table', 'lg-radius'));
322
- }
378
+ &.el-table--large {
379
+ @include data-table-radius(eleVar('table', 'lg-radius'));
380
+ }
323
381
 
324
- &.el-table--small {
325
- @include data-table-radius(eleVar('table', 'sm-radius'));
326
- }
382
+ &.el-table--small {
383
+ @include data-table-radius(eleVar('table', 'sm-radius'));
327
384
  }
328
385
 
329
386
  /* 内部组件 */
@@ -111,7 +111,11 @@ const _sfc_main = defineComponent({
111
111
  const option = {
112
112
  ...props.loadingProps || {},
113
113
  loading: tableLoading.value,
114
- class: ["ele-pro-table", { "is-maximized": tableMaximized.value }],
114
+ class: [
115
+ "ele-pro-table",
116
+ { "is-maximized": tableMaximized.value },
117
+ { "is-border": tableProps.value.border }
118
+ ],
115
119
  style: tableMaximized.value ? { zIndex } : void 0
116
120
  };
117
121
  return option;
@@ -4,18 +4,71 @@
4
4
 
5
5
  @include set-pro-table-var($ele);
6
6
 
7
- .ele-pro-table {
8
- /* 工具栏 */
9
- & > .ele-toolbar {
10
- border-bottom: none;
11
- border-bottom-left-radius: 0;
12
- border-bottom-right-radius: 0;
7
+ /* 工具栏 */
8
+ .ele-pro-table > .ele-toolbar {
9
+ border-bottom-left-radius: 0;
10
+ border-bottom-right-radius: 0;
11
+
12
+ & + .ele-toolbar {
13
+ border-top: none;
14
+ }
15
+ }
16
+
17
+ .ele-pro-table:not(.is-border) > .ele-toolbar {
18
+ border-top: none;
19
+ border-left: none;
20
+ border-right: none;
21
+ }
22
+
23
+ .ele-pro-table.is-border > .ele-toolbar {
24
+ border-bottom: none;
25
+ }
26
+
27
+ /* 取消表格上边圆角 */
28
+ .ele-pro-table > .ele-toolbar.is-default {
29
+ & + .ele-data-table > .el-table__inner-wrapper > .el-table__header-wrapper,
30
+ & + .ele-data-table.el-table--border > .el-table__inner-wrapper::after,
31
+ &
32
+ + .ele-data-table.el-table--border.hide-header
33
+ > .el-table__inner-wrapper
34
+ > .el-table__body-wrapper,
35
+ &
36
+ + .ele-virtual-table
37
+ > .el-table-v2
38
+ > .el-table-v2__main
39
+ > .el-table-v2__header-wrapper,
40
+ & + .ele-virtual-table.is-border > .el-table-v2::after,
41
+ &
42
+ + .ele-virtual-table.is-border.hide-header
43
+ > .el-table-v2
44
+ > .el-table-v2__main
45
+ > .el-table-v2__body
46
+ > div:not(.el-virtual-scrollbar) {
47
+ border-top-left-radius: 0;
48
+ border-top-right-radius: 0;
49
+ }
50
+
51
+ & + .ele-data-table.el-table--border::before,
52
+ & + .ele-virtual-table.is-border::before {
53
+ border-top-left-radius: 0;
13
54
  }
14
55
 
15
- /* 加载图标 */
16
- & > .ele-loading-spinner {
17
- background: transparent;
56
+ & + .ele-data-table.el-table--border::after,
57
+ & + .ele-virtual-table.is-border::after {
58
+ border-top-right-radius: 0;
18
59
  }
60
+
61
+ &
62
+ + .ele-data-table.hide-header:not(.el-table--border)
63
+ > .el-table__inner-wrapper::after,
64
+ & + .ele-virtual-table.hide-header:not(.is-border) > .el-table-v2::after {
65
+ display: none;
66
+ }
67
+ }
68
+
69
+ /* 加载图标 */
70
+ .ele-pro-table > .ele-loading-spinner {
71
+ background: transparent;
19
72
  }
20
73
 
21
74
  /* 底栏 */
@@ -48,9 +48,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
48
48
  "onUpdate:modelValue": _ctx.onUpdateModelValue
49
49
  }, {
50
50
  default: withCtx(() => [
51
- (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
51
+ (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index2) => {
52
52
  return openBlock(), createBlock(_component_ElTabPane, {
53
- key: item.value,
53
+ key: index2 + "-" + item.value + "-" + item.label,
54
54
  name: item.value,
55
55
  disabled: _ctx.disabled || item.disabled
56
56
  }, {
@@ -18,7 +18,7 @@
18
18
  & > th,
19
19
  & > td {
20
20
  color: eleVar('table', 'color');
21
- font-size: eleVar('table', 'font-szie');
21
+ font-size: eleVar('table', 'font-size');
22
22
  font-weight: normal;
23
23
  line-height: eleVar('table', 'line-height');
24
24
  padding: eleVar('table', 'padding');
@@ -231,7 +231,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
231
231
  default: withCtx(() => [
232
232
  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index2) => {
233
233
  return openBlock(), createBlock(_component_ElTabPane, mergeProps({
234
- key: index2 + "-" + item.name
234
+ key: index2 + "-" + item.name + "-" + item.label
235
235
  }, _ctx.omit(item, ["slot", "meta"])), createSlots({
236
236
  label: withCtx(() => [
237
237
  createVNode(_component_TabTitle, {
@@ -16,7 +16,11 @@ const _export_sfc = (sfc, props) => {
16
16
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
17
17
  const _component_EleText = resolveComponent("EleText");
18
18
  return openBlock(), createElementBlock("div", {
19
- class: normalizeClass(["ele-toolbar", { "is-plain": "plain" === _ctx.theme }])
19
+ class: normalizeClass([
20
+ "ele-toolbar",
21
+ { "is-default": "plain" !== _ctx.theme },
22
+ { "is-plain": "plain" === _ctx.theme }
23
+ ])
20
24
  }, [
21
25
  _ctx.title || _ctx.subtitle ? (openBlock(), createElementBlock("div", {
22
26
  key: 0,
@@ -41,7 +41,7 @@
41
41
  }
42
42
  }
43
43
 
44
- /* 虚拟表格单元格 */
44
+ /* 虚拟表格全部行单元格 */
45
45
  @mixin virtual-table-td {
46
46
  @include virtual-table-tr {
47
47
  & > .ele-table-td {
@@ -50,31 +50,53 @@
50
50
  }
51
51
  }
52
52
 
53
- /* 虚拟表格圆角样式 */
53
+ /* 虚拟表格单元格间距 */
54
+ @mixin virtual-table-padding($padding) {
55
+ @include virtual-table-td {
56
+ padding: $padding;
57
+ padding-right: 0;
58
+ padding-left: 0;
59
+
60
+ & > .ele-table-cell {
61
+ padding: $padding;
62
+ padding-bottom: 0;
63
+ padding-top: 0;
64
+ }
65
+ }
66
+ }
67
+
68
+ /* 虚拟表格圆角 */
54
69
  @mixin virtual-table-radius($radius) {
55
- & > .el-table-v2 > .el-table-v2__main > .el-table-v2__header-wrapper {
70
+ & > .el-table-v2 > .el-table-v2__main > .el-table-v2__header-wrapper,
71
+ &.is-border > .el-table-v2::after,
72
+ &.is-border.hide-header
73
+ > .el-table-v2
74
+ > .el-table-v2__main
75
+ > .el-table-v2__body
76
+ > div:not(.el-virtual-scrollbar) {
56
77
  border-top-left-radius: $radius;
57
78
  border-top-right-radius: $radius;
58
79
  }
59
80
 
60
- & > .el-table-v2 > .el-table-v2__footer {
81
+ & > .el-table-v2 > .el-table-v2__footer,
82
+ &.is-border > .el-table-v2::before,
83
+ &.is-border:not(.has-footer)
84
+ > .el-table-v2
85
+ > .el-table-v2__main
86
+ > .el-table-v2__body
87
+ > div:not(.el-virtual-scrollbar) {
61
88
  border-bottom-left-radius: $radius;
62
89
  border-bottom-right-radius: $radius;
63
90
  }
64
- }
65
91
 
66
- /* 设置单元格间距 */
67
- @mixin virtual-table-padding($padding) {
68
- @include virtual-table-td {
69
- padding: $padding;
70
- padding-left: 0;
71
- padding-right: 0;
92
+ &.is-border::before {
93
+ border-bottom-left-radius: $radius;
94
+ border-top-left-radius: $radius;
95
+ }
72
96
 
73
- & > .ele-table-cell {
74
- padding: $padding;
75
- padding-top: 0;
76
- padding-bottom: 0;
77
- }
97
+ &.is-border::after {
98
+ border-bottom-right-radius: $radius;
99
+ border-top-right-radius: $radius;
78
100
  }
79
101
  }
80
102
 
@@ -22,8 +22,9 @@
22
22
  }
23
23
 
24
24
  & > .el-table-v2 {
25
- position: static;
25
+ font-size: eleVar('table', 'font-size');
26
26
  box-sizing: border-box;
27
+ position: static;
27
28
 
28
29
  & > .el-table-v2__main,
29
30
  & > .el-table-v2__footer {
@@ -345,23 +346,38 @@
345
346
  &::before,
346
347
  &::after {
347
348
  position: absolute;
349
+ box-sizing: border-box;
350
+ pointer-events: none;
348
351
  z-index: 5;
349
352
  }
350
353
  }
351
354
 
352
- & > .el-table-v2 {
355
+ & > .el-table-v2::before,
356
+ & > .el-table-v2::after {
357
+ left: 0;
358
+ right: 0;
359
+ width: 100%;
360
+ height: calc(1px + #{eleVar('table', 'radius')});
361
+ }
362
+
363
+ & > .el-table-v2::before {
364
+ content: '';
365
+ bottom: 0;
366
+ border-bottom: 1px solid eleVar('table', 'border-color');
367
+ }
368
+
369
+ &.is-border > .el-table-v2::after,
370
+ &.hide-header > .el-table-v2::after {
371
+ content: '';
372
+ top: 0;
373
+ border-top: 1px solid eleVar('table', 'border-color');
374
+ }
375
+
376
+ &.is-border > .el-table-v2 {
353
377
  &::before,
354
378
  &::after {
355
- left: 0;
356
- right: 0;
357
- height: 0;
358
- width: 100%;
359
- border-top: 1px solid eleVar('table', 'border-color');
360
- }
361
-
362
- &::before {
363
- content: '';
364
- bottom: 0;
379
+ border-right: 1px solid transparent;
380
+ border-left: 1px solid transparent;
365
381
  }
366
382
  }
367
383
 
@@ -370,12 +386,6 @@
370
386
  display: none;
371
387
  }
372
388
 
373
- &.hide-header > .el-table-v2::after,
374
- &.is-border > .el-table-v2::after {
375
- content: '';
376
- top: 0;
377
- }
378
-
379
389
  /* 全边框 */
380
390
  &.is-border {
381
391
  &::before,
@@ -383,17 +393,20 @@
383
393
  content: '';
384
394
  top: 0;
385
395
  bottom: 0;
386
- width: 0;
387
396
  height: 100%;
388
- border-left: 1px solid eleVar('table', 'border-color');
397
+ width: calc(1px + #{eleVar('table', 'radius')});
398
+ border-bottom: 1px solid transparent;
399
+ border-top: 1px solid transparent;
389
400
  }
390
401
 
391
402
  &::before {
392
403
  left: 0;
404
+ border-left: 1px solid eleVar('table', 'border-color');
393
405
  }
394
406
 
395
407
  &::after {
396
408
  right: 0;
409
+ border-right: 1px solid eleVar('table', 'border-color');
397
410
  }
398
411
 
399
412
  @include virtual-table-td {
@@ -407,30 +420,28 @@
407
420
 
408
421
  /* 隐藏表头 */
409
422
  &.hide-header > .el-table-v2 {
410
- & > .el-table-v2__table > .el-table-v2__header-wrapper {
423
+ & > .el-table-v2__main > .el-table-v2__header-wrapper {
411
424
  display: none;
412
425
  }
413
426
  }
414
427
 
415
428
  /* 粘性表头 */
416
- &.is-sticky > .el-table-v2 > .el-table-v2__main {
417
- & > .el-table-v2__header-wrapper {
429
+ &.is-sticky > .el-table-v2 {
430
+ & > .el-table-v2__main > .el-table-v2__header-wrapper {
418
431
  position: sticky;
419
432
  top: eleVar('table', 'sticky-top');
420
433
  }
421
434
  }
422
435
 
423
436
  /* 圆角 */
424
- &:not(.is-border) {
425
- @include virtual-table-radius(eleVar('table', 'radius'));
437
+ @include virtual-table-radius(eleVar('table', 'radius'));
426
438
 
427
- &.is-large {
428
- @include virtual-table-radius(eleVar('table', 'lg-radius'));
429
- }
439
+ &.is-large {
440
+ @include virtual-table-radius(eleVar('table', 'lg-radius'));
441
+ }
430
442
 
431
- &.is-small {
432
- @include virtual-table-radius(eleVar('table', 'sm-radius'));
433
- }
443
+ &.is-small {
444
+ @include virtual-table-radius(eleVar('table', 'sm-radius'));
434
445
  }
435
446
 
436
447
  /* 大型尺寸 */
@@ -640,7 +640,7 @@ $ele: map.deep-merge(
640
640
  'radius': 0,
641
641
  'color': elVar('text-color', 'regular'),
642
642
  'border-color': elVar('border-color', 'light'),
643
- 'font-szie': elVar('font-size', 'base'),
643
+ 'font-size': elVar('font-size', 'base'),
644
644
  'line-height': 24px,
645
645
  'padding': 9px 12px,
646
646
  'th-color': elVar('text-color', 'primary'),
@@ -289,6 +289,7 @@ const index = vue.defineComponent({
289
289
  class: [
290
290
  "ele-data-table",
291
291
  { "is-sticky": props$1.sticky },
292
+ { "hide-header": !props$1.showHeader },
292
293
  { "hide-bottom-line": !props$1.bottomLine }
293
294
  ],
294
295
  currentRowKey: void 0,
@@ -21,15 +21,33 @@
21
21
 
22
22
  /* 设置单元格圆角 */
23
23
  @mixin data-table-radius($radius) {
24
- & > .el-table__inner-wrapper > .el-table__header-wrapper {
24
+ & > .el-table__inner-wrapper > .el-table__header-wrapper,
25
+ &.el-table--border > .el-table__inner-wrapper::after,
26
+ &.el-table--border.hide-header
27
+ > .el-table__inner-wrapper
28
+ > .el-table__body-wrapper {
25
29
  border-top-left-radius: $radius;
26
30
  border-top-right-radius: $radius;
27
31
  }
28
32
 
29
- & > .el-table__inner-wrapper > .el-table__footer-wrapper {
33
+ & > .el-table__inner-wrapper > .el-table__footer-wrapper,
34
+ &.el-table--border > .el-table__inner-wrapper::before,
35
+ &.el-table--border:not(.has-footer)
36
+ > .el-table__inner-wrapper
37
+ > .el-table__body-wrapper {
30
38
  border-bottom-left-radius: $radius;
31
39
  border-bottom-right-radius: $radius;
32
40
  }
41
+
42
+ &.el-table--border::before {
43
+ border-bottom-left-radius: $radius;
44
+ border-top-left-radius: $radius;
45
+ }
46
+
47
+ &.el-table--border::after {
48
+ border-bottom-right-radius: $radius;
49
+ border-top-right-radius: $radius;
50
+ }
33
51
  }
34
52
 
35
53
  /* 空状态样式 */
@@ -17,6 +17,14 @@ $ele-expand-path: 'M362 811 662 512 362 213' !default;
17
17
  z-index: 4;
18
18
  }
19
19
 
20
+ /* 底部间距补丁 */
21
+ .ele-data-table.el-table > .el-table__inner-wrapper > .el-table__body-wrapper {
22
+ & > .el-scrollbar > .el-scrollbar__wrap {
23
+ padding-bottom: eleVar('table', 'fix-height');
24
+ box-sizing: border-box;
25
+ }
26
+ }
27
+
20
28
  .ele-data-table {
21
29
  /* 单元格背景 */
22
30
  & > .el-table__inner-wrapper {
@@ -269,27 +277,57 @@ $ele-expand-path: 'M362 811 662 512 362 213' !default;
269
277
  }
270
278
  }
271
279
 
280
+ /* 表尾 */
281
+ & > .el-table__inner-wrapper > .el-table__footer-wrapper {
282
+ border-top: 1px solid eleVar('table', 'border-color');
283
+ margin-top: -1px;
284
+ z-index: 3;
285
+
286
+ td.el-table__cell {
287
+ border-bottom-color: transparent;
288
+ }
289
+ }
290
+
272
291
  /* 边框线 */
273
- &.el-table--border::after,
274
- &.el-table--border::before {
275
- top: 0;
276
- bottom: 0;
277
- width: 0;
278
- border-left: 1px solid eleVar('table', 'border-color');
279
- z-index: 5;
292
+ &.el-table--border,
293
+ &.el-table > .el-table__inner-wrapper {
294
+ &::before,
295
+ &::after {
296
+ background: none;
297
+ position: absolute;
298
+ box-sizing: border-box;
299
+ pointer-events: none;
300
+ z-index: 5;
301
+ }
280
302
  }
281
303
 
282
304
  &.el-table > .el-table__inner-wrapper::before,
283
- &.el-table--border > .el-table__inner-wrapper::after {
305
+ &.el-table > .el-table__inner-wrapper::after {
306
+ left: 0;
284
307
  right: 0;
285
- height: 0;
308
+ width: 100%;
309
+ height: calc(1px + #{eleVar('table', 'radius')});
310
+ }
311
+
312
+ &.el-table > .el-table__inner-wrapper::before {
313
+ content: '';
314
+ bottom: 0;
315
+ border-bottom: 1px solid eleVar('table', 'border-color');
316
+ }
317
+
318
+ &.el-table.el-table--border > .el-table__inner-wrapper::after,
319
+ &.el-table.hide-header > .el-table__inner-wrapper::after {
320
+ content: '';
321
+ top: 0;
286
322
  border-top: 1px solid eleVar('table', 'border-color');
287
- z-index: 5;
288
323
  }
289
324
 
290
- &.el-table:not(.has-footer) > .el-table__inner-wrapper::before {
291
- bottom: eleVar('table', 'fix-height');
292
- box-shadow: 0 0.8px 0 eleVar('table', 'tr-bg');
325
+ &.el-table--border > .el-table__inner-wrapper {
326
+ &::before,
327
+ &::after {
328
+ border-right: 1px solid transparent;
329
+ border-left: 1px solid transparent;
330
+ }
293
331
  }
294
332
 
295
333
  & > .el-table__inner-wrapper > .el-table__border-left-patch,
@@ -298,32 +336,51 @@ $ele-expand-path: 'M362 811 662 512 362 213' !default;
298
336
  display: none;
299
337
  }
300
338
 
301
- & > .el-table__inner-wrapper > .el-table__footer-wrapper td.el-table__cell {
302
- border-bottom-color: transparent;
339
+ /* 全边框 */
340
+ &.el-table--border {
341
+ &::before,
342
+ &::after {
343
+ content: '';
344
+ top: 0;
345
+ bottom: 0;
346
+ height: 100%;
347
+ width: calc(1px + #{eleVar('table', 'radius')});
348
+ border-bottom: 1px solid transparent;
349
+ border-top: 1px solid transparent;
350
+ }
351
+
352
+ &::before {
353
+ left: 0;
354
+ border-left: 1px solid eleVar('table', 'border-color');
355
+ }
356
+
357
+ &::after {
358
+ right: 0;
359
+ border-right: 1px solid eleVar('table', 'border-color');
360
+ }
303
361
  }
304
362
 
305
- & > .el-table__inner-wrapper > .el-table__footer-wrapper {
306
- margin-top: -1px;
363
+ /* 适配底部间距补丁 */
364
+ &.el-table:not(.has-footer) > .el-table__inner-wrapper::before {
365
+ bottom: eleVar('table', 'fix-height');
366
+ box-shadow: 0 0.8px 0 eleVar('table', 'tr-bg');
307
367
  }
308
368
 
309
- &.el-table > .el-table__inner-wrapper > .el-table__body-wrapper {
310
- & > .el-scrollbar > .el-scrollbar__wrap {
311
- padding-bottom: eleVar('table', 'fix-height');
312
- box-sizing: border-box;
313
- }
369
+ &.el-table--border:not(.has-footer)::before,
370
+ &.el-table--border:not(.has-footer)::after {
371
+ bottom: eleVar('table', 'fix-height');
372
+ height: auto;
314
373
  }
315
374
 
316
375
  /* 圆角 */
317
- &:not(.el-table--border) {
318
- @include data-table-radius(eleVar('table', 'radius'));
376
+ @include data-table-radius(eleVar('table', 'radius'));
319
377
 
320
- &.el-table--large {
321
- @include data-table-radius(eleVar('table', 'lg-radius'));
322
- }
378
+ &.el-table--large {
379
+ @include data-table-radius(eleVar('table', 'lg-radius'));
380
+ }
323
381
 
324
- &.el-table--small {
325
- @include data-table-radius(eleVar('table', 'sm-radius'));
326
- }
382
+ &.el-table--small {
383
+ @include data-table-radius(eleVar('table', 'sm-radius'));
327
384
  }
328
385
 
329
386
  /* 内部组件 */
@@ -112,7 +112,11 @@ const _sfc_main = vue.defineComponent({
112
112
  const option = {
113
113
  ...props2.loadingProps || {},
114
114
  loading: tableLoading.value,
115
- class: ["ele-pro-table", { "is-maximized": tableMaximized.value }],
115
+ class: [
116
+ "ele-pro-table",
117
+ { "is-maximized": tableMaximized.value },
118
+ { "is-border": tableProps.value.border }
119
+ ],
116
120
  style: tableMaximized.value ? { zIndex } : void 0
117
121
  };
118
122
  return option;
@@ -4,18 +4,71 @@
4
4
 
5
5
  @include set-pro-table-var($ele);
6
6
 
7
- .ele-pro-table {
8
- /* 工具栏 */
9
- & > .ele-toolbar {
10
- border-bottom: none;
11
- border-bottom-left-radius: 0;
12
- border-bottom-right-radius: 0;
7
+ /* 工具栏 */
8
+ .ele-pro-table > .ele-toolbar {
9
+ border-bottom-left-radius: 0;
10
+ border-bottom-right-radius: 0;
11
+
12
+ & + .ele-toolbar {
13
+ border-top: none;
14
+ }
15
+ }
16
+
17
+ .ele-pro-table:not(.is-border) > .ele-toolbar {
18
+ border-top: none;
19
+ border-left: none;
20
+ border-right: none;
21
+ }
22
+
23
+ .ele-pro-table.is-border > .ele-toolbar {
24
+ border-bottom: none;
25
+ }
26
+
27
+ /* 取消表格上边圆角 */
28
+ .ele-pro-table > .ele-toolbar.is-default {
29
+ & + .ele-data-table > .el-table__inner-wrapper > .el-table__header-wrapper,
30
+ & + .ele-data-table.el-table--border > .el-table__inner-wrapper::after,
31
+ &
32
+ + .ele-data-table.el-table--border.hide-header
33
+ > .el-table__inner-wrapper
34
+ > .el-table__body-wrapper,
35
+ &
36
+ + .ele-virtual-table
37
+ > .el-table-v2
38
+ > .el-table-v2__main
39
+ > .el-table-v2__header-wrapper,
40
+ & + .ele-virtual-table.is-border > .el-table-v2::after,
41
+ &
42
+ + .ele-virtual-table.is-border.hide-header
43
+ > .el-table-v2
44
+ > .el-table-v2__main
45
+ > .el-table-v2__body
46
+ > div:not(.el-virtual-scrollbar) {
47
+ border-top-left-radius: 0;
48
+ border-top-right-radius: 0;
49
+ }
50
+
51
+ & + .ele-data-table.el-table--border::before,
52
+ & + .ele-virtual-table.is-border::before {
53
+ border-top-left-radius: 0;
13
54
  }
14
55
 
15
- /* 加载图标 */
16
- & > .ele-loading-spinner {
17
- background: transparent;
56
+ & + .ele-data-table.el-table--border::after,
57
+ & + .ele-virtual-table.is-border::after {
58
+ border-top-right-radius: 0;
18
59
  }
60
+
61
+ &
62
+ + .ele-data-table.hide-header:not(.el-table--border)
63
+ > .el-table__inner-wrapper::after,
64
+ & + .ele-virtual-table.hide-header:not(.is-border) > .el-table-v2::after {
65
+ display: none;
66
+ }
67
+ }
68
+
69
+ /* 加载图标 */
70
+ .ele-pro-table > .ele-loading-spinner {
71
+ background: transparent;
19
72
  }
20
73
 
21
74
  /* 底栏 */
@@ -49,9 +49,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
49
49
  "onUpdate:modelValue": _ctx.onUpdateModelValue
50
50
  }, {
51
51
  default: vue.withCtx(() => [
52
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
52
+ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index2) => {
53
53
  return vue.openBlock(), vue.createBlock(_component_ElTabPane, {
54
- key: item.value,
54
+ key: index2 + "-" + item.value + "-" + item.label,
55
55
  name: item.value,
56
56
  disabled: _ctx.disabled || item.disabled
57
57
  }, {
@@ -18,7 +18,7 @@
18
18
  & > th,
19
19
  & > td {
20
20
  color: eleVar('table', 'color');
21
- font-size: eleVar('table', 'font-szie');
21
+ font-size: eleVar('table', 'font-size');
22
22
  font-weight: normal;
23
23
  line-height: eleVar('table', 'line-height');
24
24
  padding: eleVar('table', 'padding');
@@ -232,7 +232,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
232
232
  default: vue.withCtx(() => [
233
233
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index2) => {
234
234
  return vue.openBlock(), vue.createBlock(_component_ElTabPane, vue.mergeProps({
235
- key: index2 + "-" + item.name
235
+ key: index2 + "-" + item.name + "-" + item.label
236
236
  }, _ctx.omit(item, ["slot", "meta"])), vue.createSlots({
237
237
  label: vue.withCtx(() => [
238
238
  vue.createVNode(_component_TabTitle, {
@@ -17,7 +17,11 @@ const _export_sfc = (sfc, props2) => {
17
17
  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
18
18
  const _component_EleText = vue.resolveComponent("EleText");
19
19
  return vue.openBlock(), vue.createElementBlock("div", {
20
- class: vue.normalizeClass(["ele-toolbar", { "is-plain": "plain" === _ctx.theme }])
20
+ class: vue.normalizeClass([
21
+ "ele-toolbar",
22
+ { "is-default": "plain" !== _ctx.theme },
23
+ { "is-plain": "plain" === _ctx.theme }
24
+ ])
21
25
  }, [
22
26
  _ctx.title || _ctx.subtitle ? (vue.openBlock(), vue.createElementBlock("div", {
23
27
  key: 0,
@@ -41,7 +41,7 @@
41
41
  }
42
42
  }
43
43
 
44
- /* 虚拟表格单元格 */
44
+ /* 虚拟表格全部行单元格 */
45
45
  @mixin virtual-table-td {
46
46
  @include virtual-table-tr {
47
47
  & > .ele-table-td {
@@ -50,31 +50,53 @@
50
50
  }
51
51
  }
52
52
 
53
- /* 虚拟表格圆角样式 */
53
+ /* 虚拟表格单元格间距 */
54
+ @mixin virtual-table-padding($padding) {
55
+ @include virtual-table-td {
56
+ padding: $padding;
57
+ padding-right: 0;
58
+ padding-left: 0;
59
+
60
+ & > .ele-table-cell {
61
+ padding: $padding;
62
+ padding-bottom: 0;
63
+ padding-top: 0;
64
+ }
65
+ }
66
+ }
67
+
68
+ /* 虚拟表格圆角 */
54
69
  @mixin virtual-table-radius($radius) {
55
- & > .el-table-v2 > .el-table-v2__main > .el-table-v2__header-wrapper {
70
+ & > .el-table-v2 > .el-table-v2__main > .el-table-v2__header-wrapper,
71
+ &.is-border > .el-table-v2::after,
72
+ &.is-border.hide-header
73
+ > .el-table-v2
74
+ > .el-table-v2__main
75
+ > .el-table-v2__body
76
+ > div:not(.el-virtual-scrollbar) {
56
77
  border-top-left-radius: $radius;
57
78
  border-top-right-radius: $radius;
58
79
  }
59
80
 
60
- & > .el-table-v2 > .el-table-v2__footer {
81
+ & > .el-table-v2 > .el-table-v2__footer,
82
+ &.is-border > .el-table-v2::before,
83
+ &.is-border:not(.has-footer)
84
+ > .el-table-v2
85
+ > .el-table-v2__main
86
+ > .el-table-v2__body
87
+ > div:not(.el-virtual-scrollbar) {
61
88
  border-bottom-left-radius: $radius;
62
89
  border-bottom-right-radius: $radius;
63
90
  }
64
- }
65
91
 
66
- /* 设置单元格间距 */
67
- @mixin virtual-table-padding($padding) {
68
- @include virtual-table-td {
69
- padding: $padding;
70
- padding-left: 0;
71
- padding-right: 0;
92
+ &.is-border::before {
93
+ border-bottom-left-radius: $radius;
94
+ border-top-left-radius: $radius;
95
+ }
72
96
 
73
- & > .ele-table-cell {
74
- padding: $padding;
75
- padding-top: 0;
76
- padding-bottom: 0;
77
- }
97
+ &.is-border::after {
98
+ border-bottom-right-radius: $radius;
99
+ border-top-right-radius: $radius;
78
100
  }
79
101
  }
80
102
 
@@ -22,8 +22,9 @@
22
22
  }
23
23
 
24
24
  & > .el-table-v2 {
25
- position: static;
25
+ font-size: eleVar('table', 'font-size');
26
26
  box-sizing: border-box;
27
+ position: static;
27
28
 
28
29
  & > .el-table-v2__main,
29
30
  & > .el-table-v2__footer {
@@ -345,23 +346,38 @@
345
346
  &::before,
346
347
  &::after {
347
348
  position: absolute;
349
+ box-sizing: border-box;
350
+ pointer-events: none;
348
351
  z-index: 5;
349
352
  }
350
353
  }
351
354
 
352
- & > .el-table-v2 {
355
+ & > .el-table-v2::before,
356
+ & > .el-table-v2::after {
357
+ left: 0;
358
+ right: 0;
359
+ width: 100%;
360
+ height: calc(1px + #{eleVar('table', 'radius')});
361
+ }
362
+
363
+ & > .el-table-v2::before {
364
+ content: '';
365
+ bottom: 0;
366
+ border-bottom: 1px solid eleVar('table', 'border-color');
367
+ }
368
+
369
+ &.is-border > .el-table-v2::after,
370
+ &.hide-header > .el-table-v2::after {
371
+ content: '';
372
+ top: 0;
373
+ border-top: 1px solid eleVar('table', 'border-color');
374
+ }
375
+
376
+ &.is-border > .el-table-v2 {
353
377
  &::before,
354
378
  &::after {
355
- left: 0;
356
- right: 0;
357
- height: 0;
358
- width: 100%;
359
- border-top: 1px solid eleVar('table', 'border-color');
360
- }
361
-
362
- &::before {
363
- content: '';
364
- bottom: 0;
379
+ border-right: 1px solid transparent;
380
+ border-left: 1px solid transparent;
365
381
  }
366
382
  }
367
383
 
@@ -370,12 +386,6 @@
370
386
  display: none;
371
387
  }
372
388
 
373
- &.hide-header > .el-table-v2::after,
374
- &.is-border > .el-table-v2::after {
375
- content: '';
376
- top: 0;
377
- }
378
-
379
389
  /* 全边框 */
380
390
  &.is-border {
381
391
  &::before,
@@ -383,17 +393,20 @@
383
393
  content: '';
384
394
  top: 0;
385
395
  bottom: 0;
386
- width: 0;
387
396
  height: 100%;
388
- border-left: 1px solid eleVar('table', 'border-color');
397
+ width: calc(1px + #{eleVar('table', 'radius')});
398
+ border-bottom: 1px solid transparent;
399
+ border-top: 1px solid transparent;
389
400
  }
390
401
 
391
402
  &::before {
392
403
  left: 0;
404
+ border-left: 1px solid eleVar('table', 'border-color');
393
405
  }
394
406
 
395
407
  &::after {
396
408
  right: 0;
409
+ border-right: 1px solid eleVar('table', 'border-color');
397
410
  }
398
411
 
399
412
  @include virtual-table-td {
@@ -407,30 +420,28 @@
407
420
 
408
421
  /* 隐藏表头 */
409
422
  &.hide-header > .el-table-v2 {
410
- & > .el-table-v2__table > .el-table-v2__header-wrapper {
423
+ & > .el-table-v2__main > .el-table-v2__header-wrapper {
411
424
  display: none;
412
425
  }
413
426
  }
414
427
 
415
428
  /* 粘性表头 */
416
- &.is-sticky > .el-table-v2 > .el-table-v2__main {
417
- & > .el-table-v2__header-wrapper {
429
+ &.is-sticky > .el-table-v2 {
430
+ & > .el-table-v2__main > .el-table-v2__header-wrapper {
418
431
  position: sticky;
419
432
  top: eleVar('table', 'sticky-top');
420
433
  }
421
434
  }
422
435
 
423
436
  /* 圆角 */
424
- &:not(.is-border) {
425
- @include virtual-table-radius(eleVar('table', 'radius'));
437
+ @include virtual-table-radius(eleVar('table', 'radius'));
426
438
 
427
- &.is-large {
428
- @include virtual-table-radius(eleVar('table', 'lg-radius'));
429
- }
439
+ &.is-large {
440
+ @include virtual-table-radius(eleVar('table', 'lg-radius'));
441
+ }
430
442
 
431
- &.is-small {
432
- @include virtual-table-radius(eleVar('table', 'sm-radius'));
433
- }
443
+ &.is-small {
444
+ @include virtual-table-radius(eleVar('table', 'sm-radius'));
434
445
  }
435
446
 
436
447
  /* 大型尺寸 */
@@ -640,7 +640,7 @@ $ele: map.deep-merge(
640
640
  'radius': 0,
641
641
  'color': elVar('text-color', 'regular'),
642
642
  'border-color': elVar('border-color', 'light'),
643
- 'font-szie': elVar('font-size', 'base'),
643
+ 'font-size': elVar('font-size', 'base'),
644
644
  'line-height': 24px,
645
645
  'padding': 9px 12px,
646
646
  'th-color': elVar('text-color', 'primary'),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ele-admin-plus",
3
- "version": "1.1.7",
3
+ "version": "1.1.8-beta.1",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "dev": "vite --host --config vite.global.ts",