diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md index 6f9f1f200..d977263f6 100644 --- a/examples/docs/en-US/table.md +++ b/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 | diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 4ce5a294b..4d871ec5a 100644 --- a/examples/docs/zh-CN/table.md +++ b/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 | diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js index 89d419866..447d79c2e 100644 --- a/packages/table/src/table-header.js +++ b/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' : ''] }>
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; diff --git a/packages/table/src/table-layout.js b/packages/table/src/table-layout.js index cbe1f478d..8dcf6071a 100644 --- a/packages/table/src/table-layout.js +++ b/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() { diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue index 8747485a3..46ea0c531 100644 --- a/packages/table/src/table.vue +++ b/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)">
-
+
-
+
-
+
{ }, 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', () => {