feat(advance-table): add col border in light theme

demo/documentation/components/advanceTableDemos/basicUsage.demo.vue

@@ -79,7 +79,7 @@ const _columns3 = ($this) => {
       title: 'Name',
       key: 'name',
       sortable: true,
-      width: 400
+      width: 300
     },
     {
       title: 'Age',

packages/common/AdvanceTable/src/main.vue

@@ -3,7 +3,8 @@
     ref="tableWrapper"
     class="n-advance-table__wrapper n-advance-table"
     :class="{
-      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme,
+      'n-advance-table--col-border':colBorder
     }"
   >
     <div class="n-advance-table__operation">
@@ -279,6 +280,10 @@ export default {
     loading: {
       type: [Boolean],
       default: false
+    },
+    colBorder: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -426,6 +431,7 @@ export default {
       this.searchDataNoSort = null
       this.checkBoxes = []
       this.currentPageAllSelect = false
+      this.computeScollBar()
     },
     currentSearchColumn () {
       this.searchData = this.computeShowingData()
@@ -480,7 +486,7 @@ export default {
     this.wrapper = this.$refs.tableWrapper
     this.wrapperWidth = this.$refs.tableWrapper.offsetWidth
     this.tbodyWidth = this.relTable.offsetWidth
-    this.scrollBarWidth = this.wrapperWidth - this.tbodyWidth
+
     this.headerRealEl = this.$refs.header.$el.querySelector('thead')
 
     // console.log(this.wrapperWidth, this.tbodyWidth)
@@ -609,6 +615,13 @@ export default {
 
       event.stopPropagation()
     },
+    computeScollBar () {
+      this.$nextTick(() => {
+        this.tbodyWidth = this.relTable.offsetWidth
+        this.scrollBarWidth = this.wrapperWidth - this.tbodyWidth
+        console.log('TCL: mounted -> this.scrollBarWidth', this.wrapperWidth, this.tbodyWidth)
+      })
+    },
     computeCustomWidthStl (column) {
       if (column.width) {
         let width = column.width
@@ -645,6 +658,7 @@ export default {
     init () {
       this.$nextTick(() => {
         this.wrapperWidth = this.$refs.tableWrapper.offsetWidth
+        this.computeScollBar()
 
         // console.log(this.relTable.offsetWidth)
 

packages/common/Table/src/main.vue

@@ -6,7 +6,7 @@
       [`n-${synthesizedTheme}-theme`]: synthesizedTheme
     }"
   >
-    <table>
+    <table cellspacing="0">
       <slot>default table content</slot>
     </table>
   </div>

styles/AdvancedTable.scss

@@ -2,54 +2,72 @@
 @import "./themes/vars.scss";
 
 @include themes-mixin {
+  @include b(advance-table--col-border) {
+    table {
+      thead {
+        tr {
+          th {
+            border-right: $--table-td-border-right;
+          }
+        }
+      }
+      tbody {
+        tr {
+          td {
+            border-right: $--table-td-border-right;
+          }
+        }
+      }
+    }
+  }
   @include b(advance-table) {
-    @include once { 
-      @include e(wrapper){
+    @include once {
+      @include e(wrapper) {
         width: 100%;
       }
-      @include e(tbody){
+      @include e(tbody) {
         overflow: hidden;
         border-radius: 12px;
       }
-      @include e(td-text){
-        &-center{
+      @include e(td-text) {
+        &-center {
           text-align: center;
         }
-        &-left{
+        &-left {
           text-align: left;
         }
-        &-right{
+        &-right {
           text-align: right;
         }
-        @include m(ellipsis){
+        @include m(ellipsis) {
           text-overflow: ellipsis;
           overflow: hidden;
           white-space: nowrap;
-          &>*{
+          & > * {
             text-overflow: ellipsis;
             overflow: hidden;
             white-space: nowrap;
           }
         }
       }
-      @include e(no-data-tip){
+      @include e(no-data-tip) {
         padding: 5px;
         text-align: center;
         width: 100%;
         display: table-cell;
       }
-      @include e(pagination){
+      @include e(pagination) {
         margin-top: 27px;
         display: flex;
         justify-content: flex-end;
       }
-      @include e(operation){
+      @include e(operation) {
         display: flex;
-        justify-content:space-between;
-        &--right,&--left{
+        justify-content: space-between;
+        &--right,
+        &--left {
           display: flex;
         }
-    
       }
       @include e(sortable-column) {
         cursor: pointer;
@@ -78,30 +96,24 @@
         &::-webkit-scrollbar:horizontal {
           height: 5px;
         }
-        table thead tr th:last-of-type {
-          padding-left: 32px;
-        }
       }
     }
-    @include e(tbody){
+
+    @include e(tbody) {
       box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
     }
     @include b(table) {
       &::-webkit-scrollbar-thumb {
         border-radius: 2.5px;
         background: $--table-scrollbar-color;
-
       }
     }
-    @include e(header){
+    @include e(header) {
       background-color: $--table-header-background;
       i {
-        color:$--table-header-icon-color;
+        color: $--table-header-icon-color;
       }
     }
-   
-  
-    
   }
 }
 
@@ -154,7 +166,7 @@
 //     }
 
 //   }
-  
+
 //   @include b(table) {
 //     // background-color: #2b3147;
 //     table {
@@ -186,4 +198,4 @@
 //       padding-left: 32px;
 //     }
 //   }
-// }
+// }

styles/Table.scss

@@ -1,7 +1,6 @@
 @import "./mixins/mixins.scss";
 @import "./themes/vars.scss";
 
-
 @include themes-mixin {
   @include b(table) {
     @include once {
@@ -16,17 +15,17 @@
         thead {
           tr {
             th {
-              padding: 12px 6px 12px 6px;
+              padding: 12px 6px 12px 19px;
               text-align: left;
               border: none;
               font-weight: 400;
             }
             th:nth-child(1) {
-              padding-left: 32px;
+              padding-left: 21px;
               border-radius: 12px 0 0 0;
             }
             th:nth-last-child(1) {
-              padding-left: 32px;
+              padding-left: 21px;
               border-radius: 0 12px 0 0;
             }
           }
@@ -36,15 +35,15 @@
           color: $--table-body-color;
           tr {
             td {
-              padding: 16px 6px 12px 6px;
+              padding: 16px 6px 12px 19px;
               text-align: left;
               border: none;
             }
             td:nth-child(1) {
-              padding-left: 32px;
+              padding-left: 21px;
             }
             td:nth-last-child(1) {
-              padding-left: 32px;
+              padding-left: 21px;
             }
           }
           tr:hover {
@@ -55,10 +54,19 @@
     }
     background-color: $--table-body-background;
     box-shadow: $--table-box-shadow;
+
     table {
+      border-collapse: separate;
       thead {
         background-color: $--table-header-background;
         color: $--table-header-color;
+        tr {
+          th {
+            &:last-of-type {
+              border-right: 0;
+            }
+          }
+        }
       }
       tbody {
         background-color: $--table-body-background;
@@ -66,10 +74,15 @@
         tr:hover {
           background-color: $--table-row-hover;
         }
+        tr {
+          td {
+            &:last-of-type {
+              border-right: 0;
+            }
+          }
+        }
       }
-
     }
-    
   }
 }
 

styles/themes/dark/components/Table.scss

@@ -6,4 +6,6 @@
   $--table-row-hover: $--table-header-background !global;
   $--table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2) !global;
   $--table-border: none;
+  //TODO:ui设计深色color
+  $--table-td-border-right: none !global;
 }

styles/themes/light/components/Table.scss

@@ -6,4 +6,5 @@
   $--table-row-hover: rgba(0,0,0,0.03) !global;
   $--table-box-shadow: none !global;
   $--table-border:1px solid rgba(0,0,0,0.15) !global;
+  $--table-td-border-right: 1px solid $alpha-neutral-6 !global;
 }