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

 @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;
       }
     }