fix(table): border style not applied correctly without header/footer

globalbrain · Jan 24, 2023 · 985271b · 985271b
1 parent 3c95832
commit 985271b
Showing 1 changed file with 28 additions and 10 deletions.
diff --git a/lib/components/STable.vue b/lib/components/STable.vue
@@ -65,6 +65,12 @@ const showFooter = computed(() => {
   return page?.value && perPage?.value && total?.value
 })
 
+const classes = computed(() => ({
+  'has-header': showHeader.value,
+  'has-footer': showFooter.value,
+  'borderless': borderless?.value
+}))
+
 watch(() => records?.value, () => {
   headLock = true
   bodyLock = true
@@ -104,7 +110,7 @@ function updateColWidth(key: string, value: string) {
 </script>
 
 <template>
-  <div class="STable" :class="{ borderless }" ref="el">
+  <div class="STable" :class="classes" ref="el">
     <div class="box">
       <STableHeader
         v-if="showHeader"
@@ -210,7 +216,6 @@ function updateColWidth(key: string, value: string) {
   border-left: var(--table-border-left, var(--table-border));
   border-radius: var(--table-border-radius);
   width: 100%;
-  overflow: hidden;
 
   .STable.borderless & {
     border-right: 0;
@@ -230,16 +235,29 @@ function updateColWidth(key: string, value: string) {
   width: 100%;
   min-width: 100%;
   overflow-x: auto;
+}
+
+.container.head {
+  position: var(--table-head-position, static);
+  top: var(--table-head-top, auto);
+  z-index: 100;
+  border-radius: var(--table-border-radius) var(--table-border-radius) 0 0;
+  background-color: var(--bg-elv-2);
+
+  .STable.has-header & {
+    border-radius: 0;
+  }
 
-  &.head {
-    position: var(--table-head-position, static);
-    top: var(--table-head-top, auto);
-    z-index: 100;
-    background-color: var(--bg-elv-2);
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
+.container.body {
+  border-radius: 6px 6px var(--table-border-radius) var(--table-border-radius);
+
+  .STable.has-footer & {
+    border-radius: 0;
   }
 }