Merge pull request #1195 from furybean/table-header-click

Table: add show-header prop & add header-click event & make height mo…

examples/docs/en-US/table.md

@@ -1072,6 +1072,7 @@ Customize table column so it can be integrated with other components.
 | stripe | whether table is striped | boolean | — | false |
 | border | whether table has vertical border | boolean | — | false |
 | fit | whether width of column automatically fits its container | boolean | — | true |
+| show-header | whether table header is visible | boolean | - | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
 | row-class-name | function that returns custom class names for a row | Function(row, index) | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
@@ -1087,6 +1088,7 @@ Customize table column so it can be integrated with other components.
 | cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event |
 | cell-click | triggers when clicking a cell | row, column, cell, event |
 | row-click | triggers when clicking a row | row, event |
+| header-click | triggers when clicking a column header | column, event |
 | sort-change | triggers when Table's sorting changes | { column, prop, order } |
 | current-change | triggers when current row changes | currentRow, oldCurrentRow |
 

examples/docs/zh-CN/table.md

@@ -1073,10 +1073,11 @@
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | data | 显示的数据 | array | — | — |
-| height | table 的高度，默认高度为空，即自动高度，单位 px | string/number | — | — |
+| height | Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。  | string/number | — | — |
 | stripe | 是否为斑马纹 table | boolean | — | false |
 | border | 是否带有纵向边框 | boolean | — | false |
 | fit | 列的宽度是否自撑开 | boolean | — | true |
+| show-header | 是否显示表头 | boolean | - | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |
 | row-class-name | 行的 className 的回调。 | Function(row, index) | — | — |
 | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
@@ -1092,6 +1093,7 @@
 | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
 | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
 | row-click | 当某一行被点击时会触发该事件 | row, event |
+| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
 | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
 

packages/table/src/table-header.js

@@ -33,6 +33,7 @@ export default {
                   on-mousemove={ ($event) => this.handleMouseMove($event, column) }
                   on-mouseout={ this.handleMouseOut }
                   on-mousedown={ ($event) => this.handleMouseDown($event, column) }
+                  on-click={ ($event) => this.handleClick($event, column) }
                   class={ [column.id, column.order, column.align, column.className || '', this.isCellHidden(cellIndex) ? 'is-hidden' : ''] }>
                   <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : ''] }>
                   {
@@ -162,6 +163,10 @@ export default {
       }, 16);
     },
 
+    handleClick(event, column) {
+      this.$parent.$emit('header-click', column, event);
+    },
+
     handleMouseDown(event, column) {
       /* istanbul ignore if */
       if (this.draggingColumn && this.border) {
@@ -239,7 +244,7 @@ export default {
       if (!this.dragging && this.border) {
         let rect = target.getBoundingClientRect();
 
-        var bodyStyle = document.body.style;
+        const bodyStyle = document.body.style;
         if (rect.width > 12 && rect.right - event.pageX < 8) {
           bodyStyle.cursor = 'col-resize';
           this.draggingColumn = column;

packages/table/src/table-layout.js

@@ -8,6 +8,7 @@ class TableLayout {
     this.store = null;
     this.columns = null;
     this.fit = true;
+    this.showHeader = true;
 
     this.height = null;
     this.scrollX = false;
@@ -50,16 +51,21 @@ class TableLayout {
   }
 
   setHeight(height) {
-    if (typeof height === 'string' && /^\d+$/.test(height)) {
-      height = Number(height);
+    const el = this.table.$el;
+    if (typeof height === 'string') {
+      if (/^\d+$/.test(height)) {
+        height = Number(height);
+      }
     }
 
     this.height = height;
 
-    const el = this.table.$el;
-    if (!isNaN(height) && el) {
+    if (!el) return;
+    if (!isNaN(height)) {
       el.style.height = height + 'px';
 
+      this.updateHeight();
+    } else if (typeof height === 'string') {
       this.updateHeight();
     }
   }
@@ -67,12 +73,23 @@ class TableLayout {
   updateHeight() {
     const height = this.tableHeight = this.table.$el.clientHeight;
     const { headerWrapper } = this.table.$refs;
-    if (!headerWrapper) return;
-    const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
-    const bodyHeight = height - headerHeight;
-    if (this.height !== null && !isNaN(this.height)) this.bodyHeight = bodyHeight;
-    this.fixedBodyHeight = this.scrollX ? bodyHeight - this.gutterWidth : bodyHeight;
-    this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
+    if (this.showHeader && !headerWrapper) return;
+    if (!this.showHeader) {
+      this.headerHeight = 0;
+      if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
+        this.bodyHeight = height;
+      }
+      this.fixedBodyHeight = this.scrollX ? height - this.gutterWidth : height;
+      this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
+    } else {
+      const headerHeight = this.headerHeight = headerWrapper.offsetHeight;
+      const bodyHeight = height - headerHeight;
+      if (this.height !== null && (!isNaN(this.height) || typeof this.height === 'string')) {
+        this.bodyHeight = bodyHeight;
+      }
+      this.fixedBodyHeight = this.scrollX ? bodyHeight - this.gutterWidth : bodyHeight;
+      this.viewportHeight = this.scrollX ? height - this.gutterWidth : height;
+    }
   }
 
   update() {

packages/table/src/table.vue

@@ -3,7 +3,7 @@
     :class="{ 'el-table--fit': fit, 'el-table--striped': stripe, 'el-table--border': border }"
     @mouseleave="handleMouseLeave($event)">
     <div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>
-    <div class="el-table__header-wrapper" ref="headerWrapper">
+    <div class="el-table__header-wrapper" ref="headerWrapper" v-if="showHeader">
       <table-header
         :store="store"
         :layout="layout"
@@ -31,7 +31,7 @@
         width: layout.fixedWidth ? layout.fixedWidth + 'px' : '',
         height: layout.viewportHeight ? layout.viewportHeight + 'px' : ''
       }">
-      <div class="el-table__fixed-header-wrapper" ref="fixedHeaderWrapper">
+      <div class="el-table__fixed-header-wrapper" ref="fixedHeaderWrapper" v-if="showHeader">
         <table-header
           fixed="left"
           :border="border"
@@ -61,7 +61,7 @@
         height: layout.viewportHeight ? layout.viewportHeight + 'px' : '',
         right: layout.scrollY ? layout.gutterWidth + 'px' : ''
       }">
-      <div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper">
+      <div class="el-table__fixed-header-wrapper" ref="rightFixedHeaderWrapper" v-if="showHeader">
         <table-header
           fixed="right"
           :border="border"
@@ -132,6 +132,11 @@
 
       context: {},
 
+      showHeader: {
+        type: Boolean,
+        default: true
+      },
+
       rowClassName: [String, Function],
 
       highlightCurrentRow: Boolean,
@@ -290,7 +295,8 @@
       const layout = new TableLayout({
         store,
         table: this,
-        fit: this.fit
+        fit: this.fit,
+        showHeader: this.showHeader
       });
       return {
         store,

test/unit/specs/table.spec.js

@@ -116,6 +116,15 @@ describe('Table', () => {
       }, DELAY);
     });
 
+    it('show-header', done => {
+      const vm = createTable(':show-header="false"');
+      setTimeout(_ => {
+        expect(vm.$el.querySelectorAll('.el-table__header-wrapper').length).to.equal(0);
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
+
     it('tableRowClassName', done => {
       const vm = createTable(':row-class-name="tableRowClassName"', {
         methods: {
@@ -384,6 +393,20 @@ describe('Table', () => {
         }, DELAY);
       }, DELAY);
     });
+
+    it('header-click', done => {
+      const vm = createTable('header-click');
+
+      setTimeout(_ => {
+        const cell = vm.$el.querySelectorAll('.el-table__header th')[1]; // header[prop='name']
+
+        triggerEvent(cell, 'click');
+        expect(vm.result).to.length(2); // column, event
+        expect(vm.result[0]).to.have.property('property').to.equal('name');
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
   });
 
   describe('column attributes', () => {