Table: add chalk theme (#7059)

* Table: add chalk theme

* Table: add group header & other

* Table: del package.lock

* Table: del single test trace

* Table: fix border problem

* Table: fix boder problem

* Table: clean css

* Table: footer border right - -|

examples/docs/en-US/table.md

@@ -561,7 +561,6 @@ When there are too many rows, you can use a fixed header.
   <el-table
     :data="tableData3"
     height="250"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -629,7 +628,6 @@ When there are too many columns, you can fix some of them.
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       fixed
@@ -732,7 +730,6 @@ When you have huge chunks of data to put in a table, you can fix the header and
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%"
     height="250">
     <el-table-column
@@ -839,7 +836,6 @@ When the the data is dynamically changed, you might want the table to have a max
 <template>
   <el-table
     :data="tableData4"
-    border
     style="width: 100%"
     max-height="250">
     <el-table-column
@@ -964,7 +960,6 @@ When the data structure is complex, you can use group header to show the data hi
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1150,7 +1145,6 @@ You can also select multiple rows.
   <el-table
     ref="multipleTable"
     :data="tableData3"
-    border
     style="width: 100%"
     @selection-change="handleSelectionChange">
     <el-table-column
@@ -1244,7 +1238,6 @@ Sort the data to find or compare data quickly.
 <template>
   <el-table
     :data="tableData"
-    border
     :default-sort = "{prop: 'date', order: 'descending'}"
     style="width: 100%">
     <el-table-column
@@ -1308,7 +1301,6 @@ Filter the table to find desired data.
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1390,7 +1382,6 @@ Customize table column so it can be integrated with other components.
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       label="Date"

examples/docs/zh-CN/table.md

@@ -769,7 +769,6 @@
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%"
     height="250">
     <el-table-column
@@ -876,7 +875,6 @@
 <template>
   <el-table
     :data="tableData4"
-    border
     style="width: 100%"
     max-height="250">
     <el-table-column
@@ -1001,7 +999,6 @@
 <template>
   <el-table
     :data="tableData3"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1187,7 +1184,6 @@
   <el-table
     ref="multipleTable"
     :data="tableData3"
-    border
     tooltip-effect="dark"
     style="width: 100%"
     @selection-change="handleSelectionChange">
@@ -1282,7 +1278,6 @@
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%"
     :default-sort = "{prop: 'date', order: 'descending'}"
     >
@@ -1348,7 +1343,6 @@
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       prop="date"
@@ -1430,7 +1424,6 @@
 <template>
   <el-table
     :data="tableData"
-    border
     style="width: 100%">
     <el-table-column
       label="日期"

packages/table/src/table-footer.js

@@ -53,7 +53,7 @@ export default {
               : ''
           }
         </colgroup>
-        <tbody>
+        <tbody class={ [{ 'has-gutter': this.hasGutter }] }>
           <tr>
           {
             this._l(this.columns, (column, cellIndex) =>
@@ -70,7 +70,7 @@ export default {
             )
           }
           {
-            !this.fixed && this.layout.gutterWidth
+            this.hasGutter
               ? <td class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></td>
               : ''
           }
@@ -121,6 +121,10 @@ export default {
 
     columns() {
       return this.store.states.columns;
+    },
+
+    hasGutter() {
+      return !this.fixed && this.layout.gutterWidth;
     }
   },
 

packages/table/src/table-header.js

@@ -68,6 +68,9 @@ export default {
   render(h) {
     const originColumns = this.store.states.originColumns;
     const columnRows = convertToRows(originColumns, this.columns);
+    // 是否拥有多级表头
+    const isGroup = columnRows.length > 1;
+    if (isGroup) this.$parent.isGroup = true;
 
     return (
       <table
@@ -89,7 +92,7 @@ export default {
               : ''
           }
         </colgroup>
-        <thead>
+        <thead class={ [{ 'is-group': isGroup, 'has-gutter': this.hasGutter }] }>
           {
             this._l(columnRows, (columns, rowIndex) =>
               <tr>
@@ -112,8 +115,12 @@ export default {
                     {
                       column.sortable
                         ? <span class="caret-wrapper" on-click={ ($event) => this.handleSortClick($event, column) }>
-                            <i class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }></i>
-                            <i class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }></i>
+                            <span class="sort-caret ascending" on-click={ ($event) => this.handleSortClick($event, column, 'ascending') }>
+                              <i class="el-icon-sort-up"></i>
+                            </span>
+                            <span class="sort-caret descending" on-click={ ($event) => this.handleSortClick($event, column, 'descending') }>
+                              <i class="el-icon-sort-down"></i>
+                            </span>
                           </span>
                         : ''
                     }
@@ -127,7 +134,7 @@ export default {
                 )
               }
               {
-                !this.fixed && this.layout.gutterWidth
+                this.hasGutter
                   ? <th class="gutter" style={{ width: this.layout.scrollY ? this.layout.gutterWidth + 'px' : '0' }}></th>
                   : ''
               }
@@ -183,6 +190,10 @@ export default {
 
     columns() {
       return this.store.states.columns;
+    },
+
+    hasGutter() {
+      return !this.fixed && this.layout.gutterWidth;
     }
   },
 

packages/table/src/table.vue

@@ -3,8 +3,9 @@
     :class="{
       'el-table--fit': fit,
       'el-table--striped': stripe,
-      'el-table--border': border,
+      'el-table--border': border || isGroup,
       'el-table--hidden': isHidden,
+      'el-table--group': isGroup,
       'el-table--fluid-height': maxHeight,
       'el-table--enable-row-hover': !store.states.isComplex,
       'el-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
@@ -23,6 +24,7 @@
     <div
       class="el-table__body-wrapper"
       ref="bodyWrapper"
+      :class="[`is-scroll-${scrollPosition}`]"
       :style="[bodyHeight]">
       <table-body
         :context="context"
@@ -63,7 +65,9 @@
           :layout="layout"
           :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }"></table-header>
       </div>
-      <div class="el-table__fixed-body-wrapper" ref="fixedBodyWrapper"
+      <div
+        class="el-table__fixed-body-wrapper"
+        ref="fixedBodyWrapper"
         :style="[
           { top: layout.headerHeight + 'px' },
           fixedBodyHeight
@@ -94,7 +98,7 @@
       v-if="rightFixedColumns.length > 0"
       :style="[
         { width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' },
-        { right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 1)) + 'px' : '' },
+        { right: layout.scrollY ? (border ? layout.gutterWidth : (layout.gutterWidth || 0)) + 'px' : '' },
         fixedHeight
       ]">
       <div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper" v-if="showHeader">
@@ -249,11 +253,21 @@
       bindEvents() {
         const { headerWrapper, footerWrapper } = this.$refs;
         const refs = this.$refs;
+        let self = this;
         this.bodyWrapper.addEventListener('scroll', function() {
           if (headerWrapper) headerWrapper.scrollLeft = this.scrollLeft;
           if (footerWrapper) footerWrapper.scrollLeft = this.scrollLeft;
           if (refs.fixedBodyWrapper) refs.fixedBodyWrapper.scrollTop = this.scrollTop;
           if (refs.rightFixedBodyWrapper) refs.rightFixedBodyWrapper.scrollTop = this.scrollTop;
+          const maxScrollLeftPosition = this.scrollWidth - this.offsetWidth - 1;
+          const scrollLeft = this.scrollLeft;
+          if (scrollLeft >= maxScrollLeftPosition) {
+            self.scrollPosition = 'right';
+          } else if (scrollLeft === 0) {
+            self.scrollPosition = 'left';
+          } else {
+            self.scrollPosition = 'middle';
+          }
         });
 
         const scrollBodyWrapper = event => {
@@ -459,7 +473,10 @@
         layout,
         isHidden: false,
         renderExpanded: null,
-        resizeProxyVisible: false
+        resizeProxyVisible: false,
+        // 是否拥有多级表头
+        isGroup: false,
+        scrollPosition: 'left'
       };
     }
   };

packages/theme-chalk/src/common/var.scss

@@ -467,13 +467,14 @@ $--dialog-padding-primary: 15px;
 
 /* Table
 -------------------------- */
-$--table-border-color: $--border-color-lighter;
+$--table-border:  1px solid $--border-color-lighter;
 $--table-text-color: $--color-text-regular;
 $--table-header-color: $--color-text-secondary;
 $--table-row-hover-background: $--background-color-base;
-$--table-current-row-background: $--background-color-base;
+$--table-current-row-background: $--color-primary-light-9;
 $--table-header-background: $--color-text-secondary;
 $--table-footer-background: $--color-text-placeholder;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
 
 /* Pagination
 -------------------------- */

packages/theme-chalk/src/icon.scss

@@ -1,9 +1,9 @@
 @font-face {
   font-family: 'element-icons';
-  src: url('fonts/element-icons.woff?t=1504667669908') format('woff'), /* chrome, firefox */
-       url('fonts/element-icons.ttf?t=1504667669908') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  src: url('fonts/element-icons.woff?t=1505459769526') format('woff'), /* chrome, firefox */
+       url('fonts/element-icons.ttf?t=1505459769526') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
   font-weight: normal;
-  font-style: normal;
+  font-style: normal
 }
 
 [class^="el-icon-"], [class*=" el-icon-"] {
@@ -70,6 +70,8 @@
 .el-icon-error:before { content: "\e62c"; }
 .el-icon-success:before { content: "\e62d"; }
 .el-icon-warning:before { content: "\e62e"; }
+.el-icon-sort-down:before { content: "\e630"; }
+.el-icon-sort-up:before { content: "\e631"; }
 
 .el-icon-loading {
   animation: rotating 1s linear infinite;

packages/theme-chalk/src/mixins/mixins.scss

@@ -17,7 +17,7 @@
  -------------------------- */
 @mixin scroll-bar {
   $--scrollbar-thumb-background: #b4bccc;
-  $--scrollbar-track-background: #edeff5;
+  $--scrollbar-track-background: #fff;
 
   &::-webkit-scrollbar {
     z-index: 11;
@@ -30,6 +30,7 @@
 
     &-thumb {
       border-radius: 5px;
+      width: 6px;
       background: $--scrollbar-thumb-background;
     }
 
@@ -39,6 +40,11 @@
 
     &-track {
       background: $--scrollbar-track-background;
+
+      &-piece {
+        background: $--scrollbar-track-background;
+        width: 6px;
+      }
     }
   }
 }

packages/theme-chalk/src/table-column.scss

@@ -13,7 +13,7 @@
 }
 
 @include b(table-filter) {
-  border: solid 1px $--color-black;
+  border: solid 1px $--border-color-lighter;
   border-radius: 2px;
   background-color: $--color-white;
   box-shadow: $--dropdown-menu-box-shadow;
@@ -50,15 +50,15 @@
   }
 
   @include e(bottom) {
-    border-top: 1px solid $--color-black;
+    border-top: 1px solid $--border-color-lighter;
     padding: 8px;
 
     button {
       background: transparent;
       border: none;
-      color: $--color-black;
+      color: $--color-text-regular;
       cursor: pointer;
-      font-size: $--font-size-base;
+      font-size: $--font-size-small;
       padding: 0 3px;
 
       &:hover {
@@ -70,7 +70,7 @@
       }
 
       &.is-disabled {
-        color: $--color-black;
+        color: $--disabled-color-base;
         cursor: not-allowed;
       }
     }

packages/theme-chalk/src/table.scss

@@ -10,37 +10,10 @@
   width: 100%;
   max-width: 100%;
   background-color: $--color-white;
-  border: 1px solid $--table-border-color;
   font-size: 14px;
   color: $--table-text-color;
 
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 1px;
-    background-color: $--table-border-color;
-    z-index: 1;
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 1px;
-    height: 100%;
-    background-color: $--table-border-color;
-    z-index: 1;
-  }
-
-  .el-tooltip.cell {
-    white-space: nowrap;
-    min-width: 50px;
-  }
-
+  // 数据为空
   @include e(empty-block) {
     position: relative;
     min-height: 60px;
@@ -57,6 +30,7 @@
     color: color($--color-primary s(16%) l(44%));
   }
 
+  // 展开行
   @include e(expand-column) {
     .cell {
       padding: 0;
@@ -86,12 +60,15 @@
   }
 
   @include e(expanded-cell) {
-    padding: 20px 50px;
-    background-color: $--color-black;
-    box-shadow: inset 0 2px 0 #f4f4f4;
+    background-color: $--color-white;
+
+    // 纯属为了增加权重
+    &[class*=cell] {
+      padding: 20px 50px;
+    }
 
     &:hover {
-      background-color: $--color-black !important;
+      background-color: $--table-row-hover-background !important;
     }
   }
 
@@ -99,18 +76,24 @@
     border-right: 0;
     border-bottom: 0;
 
-    & th.gutter, td.gutter {
+    th.gutter, td.gutter {
       border-right-width: 1px;
     }
   }
 
-  & th {
-    white-space: nowrap;
-    overflow: hidden;
+  thead {
+    color: $--table-header-color;
+    font-weight: 500;
+
+    &.is-group {
+      th {
+        background: $--background-color-base;
+      }
+    }
   }
 
-  & th, td {
-    height: 40px;
+  th, td {
+    padding: 12px 0;
     min-width: 0;
     box-sizing: border-box;
     text-overflow: ellipsis;
@@ -128,52 +111,167 @@
     @include when(right) {
       text-align: right;
     }
-  }
 
-  & th.is-leaf, td {
-    border-bottom: 1px solid $--table-border-color;
-  }
+    &.gutter {
+      width: 15px;
+      border-right-width: 0;
+      border-bottom-width: 0;
+      padding: 0;
+    }
 
-  @include m(border) {
-    & th, td {
-      border-right: 1px solid $--table-border-color;
+    &.is-hidden {
+      > * {
+        visibility: hidden;
+      }
     }
+  }
 
-    & th {
-      border-bottom: 1px solid $--table-border-color;
+  tr {
+    background-color: $--color-white;
+
+    input[type="checkbox"] {
+      margin: 0;
     }
   }
 
-  @include m(hidden) {
-    visibility: hidden;
+  th.is-leaf, td {
+    border-bottom: $--table-border;
   }
 
-  & th {
-    background-color: $--table-header-background;
+  th {
+    white-space: nowrap;
+    overflow: hidden;
+    user-select: none;
     text-align: left;
+
+    div {
+      display: inline-block;
+      padding-left: 10px;
+      padding-right: 10px;
+      line-height: 40px;
+      box-sizing: border-box;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    > .cell {
+      position: relative;
+      word-wrap: normal;
+      text-overflow: ellipsis;
+      display: inline-block;
+      vertical-align: middle;
+      width: 100%;
+      box-sizing: border-box;
+
+      &.highlight {
+        color: $--color-primary;
+      }
+    }
+
+    &.required > div::before {
+      display: inline-block;
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #ff4d51;
+      margin-right: 5px;
+      vertical-align: middle;
+    }
   }
 
-  & th > div {
-    display: inline-block;
-    padding-left: 18px;
-    padding-right: 18px;
-    line-height: 40px;
+  td {
+    div {
+      box-sizing: border-box;
+    }
+
+    &.gutter {
+      width: 0;
+    }
+  }
+
+  .cell {
     box-sizing: border-box;
     overflow: hidden;
-    white-space: nowrap;
     text-overflow: ellipsis;
+    white-space: normal;
+    word-break: break-all;
+    line-height: 23px;
+    padding-left: 10px;
+    padding-right: 10px;
+
+    &.el-tooltip {
+      white-space: nowrap;
+      min-width: 50px;
+    }
   }
 
-  & td > div {
-    box-sizing: border-box;
+  // 拥有多级表头
+  @include m((group, border)) {
+    border: $--table-border;
+
+    @include share-rule(border-pseudo) {
+      content: '';
+      position: absolute;
+      background-color: $--border-color-lighter;
+      z-index: 1;
+    }
+
+    // 表格右部伪 border
+    &::after {
+      @include extend-rule(border-pseudo);
+      top: 0;
+      right: 0;
+      width: 1px;
+      height: 100%;
+    }
+  }
+
+  // 表格底部伪 border，总是有的
+  &::before {
+    @include extend-rule(border-pseudo);
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+  }
+
+  // table--border
+  @include m(border) {
+    border-right: none;
+    border-bottom: none;
+
+    th, td {
+      border-right: $--table-border;
+    }
+
+    .has-gutter {
+      th:nth-last-of-type(2), td:nth-last-of-type(2) {
+        border-right: none;
+      }
+    }
+
+    th.gutter:last-of-type {
+      border-bottom: $--table-border;
+      border-bottom-width: 1px;
+    }
+
+    & th {
+      border-bottom: $--table-border;
+    }
+  }
+
+  @include m(hidden) {
+    visibility: hidden;
   }
 
   @include e((fixed, fixed-right)) {
     position: absolute;
     top: 0;
     left: 0;
-    box-shadow: 1px 0 8px #d3d4d6;
     overflow-x: hidden;
+    box-shadow: $--table-fixed-box-shadow;
 
     &::before {
       content: '';
@@ -182,7 +280,7 @@
       bottom: 0;
       width: 100%;
       height: 1px;
-      background-color: $--table-border-color;
+      background-color: $--border-color-lighter;
       z-index: 4;
     }
   }
@@ -191,8 +289,8 @@
     position: absolute;
     top: -1px;
     right: 0;
-    background-color: $--table-header-background;
-    border-bottom: 1px solid $--table-border-color;
+    background-color: $--color-white;
+    border-bottom: $--table-border;
   }
 
   @include e(fixed-right) {
@@ -200,8 +298,6 @@
     left: auto;
     right: 0;
 
-    box-shadow: -1px 0 8px #d3d4d6;
-
     .el-table__fixed-header-wrapper,
     .el-table__fixed-body-wrapper,
     .el-table__fixed-footer-wrapper {
@@ -215,11 +311,6 @@
     left: 0;
     top: 0;
     z-index: 3;
-
-    & thead div {
-      background-color: $--table-header-background;
-      color: $--table-text-color;
-    }
   }
 
   @include e(fixed-footer-wrapper) {
@@ -229,8 +320,8 @@
     z-index: 3;
 
     & tbody td {
-      border-top: 1px solid $--table-border-color;
-      background-color: $--table-footer-background;
+      border-top: $--table-border;
+      background-color: $--table-row-hover-background;
       color: $--table-text-color;
     }
   }
@@ -250,7 +341,7 @@
   @include e(footer-wrapper) {
     margin-top: -1px;
     td {
-      border-top: 1px solid $--table-border-color;
+      border-top: $--table-border;
     }
   }
 
@@ -261,13 +352,8 @@
   @include e((header-wrapper, footer-wrapper)) {
     overflow: hidden;
 
-    & thead div {
-      background-color: $--table-header-background;
-      color: $--table-text-color;
-    }
-
     & tbody td {
-      background-color: $--table-footer-background;
+      background-color: $--table-row-hover-background;
       color: $--table-text-color;
     }
   }
@@ -275,115 +361,63 @@
   @include e(body-wrapper) {
     overflow: auto;
     position: relative;
-  }
 
-  & th.required > div::before {
-    display: inline-block;
-    content: "";
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #ff4d51;
-    margin-right: 5px;
-    vertical-align: middle;
-  }
+    @include when(scroll-left) {
+      ~ .el-table__fixed {
+        box-shadow: none;
+      }
+    }
 
-  & th > .cell {
-    position: relative;
-    word-wrap: normal;
-    text-overflow: ellipsis;
-    display: inline-block;
-    line-height: 30px;
-    vertical-align: middle;
-    width: 100%;
-    box-sizing: border-box;
+    @include when(scroll-right) {
+      ~ .el-table__fixed-right {
+        box-shadow: none;
+      }
+    }
+
+    .el-table--border {
+      @include when(scroll-right) {
+        ~ .el-table__fixed-right {
+          border-left: $--table-border;
+        }
+      }
 
-    &.highlight {
-      color: $--color-primary;
+      @include when(scroll-left) {
+        ~ .el-table__fixed {
+          border-right: $--table-border;
+        }
+      }
     }
   }
 
-  & .caret-wrapper {
+  .caret-wrapper {
     position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 13px;
+    width: 24px;
     cursor: pointer;
-    display: inline-block;
-    vertical-align: middle;
-    margin-left: 5px;
-    margin-top: -2px;
-    width: 16px;
-    height: 30px;
     overflow: initial;
   }
 
-  & .sort-caret {
-    display: inline-block;
-    width: 0;
-    height: 0;
-    border: 0;
-    content: "";
-    position: absolute;
-    left: 3px;
-    z-index: 2;
-
-    &.ascending {
-      top: 9px;
-      border-top: none;
-      border-right: 5px solid transparent;
-      border-bottom: 5px solid $--color-black;
-      border-left: 5px solid transparent;
-    }
-
-    &.descending {
-      bottom: 9px;
-      border-top: 5px solid $--color-black;
-      border-right: 5px solid transparent;
-      border-bottom: none;
-      border-left: 5px solid transparent;
-    }
-  }
-
-  & .ascending .sort-caret.ascending {
-    border-bottom-color: $--color-black;
-  }
-
-  & .descending .sort-caret.descending {
-    border-top-color: $--color-black;
-  }
-
-  & th.gutter, td.gutter {
-    width: 15px;
-    border-right-width: 0;
-    border-bottom-width: 0;
-    padding: 0;
-  }
-
-  & td.gutter {
-    width: 0;
-  }
-
-  & td.is-hidden, th.is-hidden {
-    > * {
-      visibility: hidden;
-    }
+  .sort-caret {
+    color: $--icon-color-base;
+    width: 14px;
+    overflow: hidden;
+    font-size: 13px;
   }
 
-  & .cell {
-    box-sizing: border-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-    word-break: break-all;
-    line-height: 24px;
-    padding-left: 18px;
-    padding-right: 18px;
+  .ascending .sort-caret.ascending {
+    color: $--color-primary;
   }
 
-  & tr input[type="checkbox"] {
-    margin: 0;
+  .descending .sort-caret.descending {
+    color: $--color-primary;
   }
 
-  & tr {
-    background-color: $--color-white;
+  .hidden-columns {
+    visibility: hidden;
+    position: absolute;
+    z-index: -1;
   }
 
   @include m(striped) {
@@ -391,11 +425,10 @@
       & tr.el-table__row--striped {
         td {
           background: #FAFAFA;
-          background-clip: padding-box;
         }
 
         &.current-row td {
-          background: color($--color-primary tint(92%));
+          background-color: $--table-current-row-background;
         }
       }
     }
@@ -406,14 +439,14 @@
       &, &.el-table__row--striped {
         &, &.current-row {
           > td {
-            background-color: $--color-black;
+            background-color: $--table-current-row-background;
           }
         }
       }
     }
 
     tr.current-row > td {
-      background: color($--color-primary tint(92%));
+      background-color: $--table-current-row-background;
     }
   }
 
@@ -423,24 +456,19 @@
     top: 0;
     bottom: 0;
     width: 0;
-    border-left: 1px solid $--table-border-color;
+    border-left: $--table-border;
     z-index: 10;
   }
 
-  & .hidden-columns {
-    visibility: hidden;
-    position: absolute;
-    z-index: -1;
-  }
-
   @include e(column-filter-trigger) {
     display: inline-block;
     line-height: 34px;
-    margin-left: 5px;
     cursor: pointer;
 
     & i {
-      color: $--color-black;
+      color: $--color-info;
+      font-size: 12px;
+      transform: scale(.75);
     }
   }
 
@@ -452,8 +480,7 @@
 
   @include m(enable-row-hover) {
     .el-table__body tr:hover > td {
-      background-color: $--color-black;
-      background-clip: padding-box;
+      background-color: $--table-row-hover-background;
     }
   }