diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md index 6c9799c98..c959edb54 100644 --- a/examples/docs/zh-CN/table.md +++ b/examples/docs/zh-CN/table.md @@ -1421,6 +1421,7 @@ | context | 设置上下文环境,例如设置当前上下文就是 `_self`,父级就是 `$parent`,根组件 `$root` | Object | - | Table 所处上下文 | | inline-template | 指定该属性后可以自定义 column 模板,参考多选的时间列,通过 row 获取行信息。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), store(table store) }` 以及 Table 所处的上下文环境。 | — | — | | align | 对齐方式 | String | left, center, right | left | +| header_align | 表头对齐方式,若不设置该项,则使用表格的对齐方式 | String | left, center, right | — | | class-name | 列的 className | string | — | — | | selectable | 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — | | reserve-selection | 仅对 type=selection 的列有效,类型为 Boolean,为 true 则代表会保留之前数据的选项,需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false | diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js index b2db006d7..de25ebfef 100644 --- a/packages/table/src/table-column.js +++ b/packages/table/src/table-column.js @@ -114,6 +114,7 @@ export default { context: {}, columnKey: String, align: String, + headerAlign: String, showTooltipWhenOverflow: Boolean, showOverflowTooltip: Boolean, fixed: [Boolean, String], @@ -205,6 +206,7 @@ export default { isColumnGroup, context: this.context, align: this.align ? 'is-' + this.align : null, + headerAlign: this.headerAlign ? 'is-' + this.headerAlign : (this.align ? 'is-' + this.align : null), sortable: this.sortable, sortMethod: this.sortMethod, resizable: this.resizable, @@ -305,6 +307,12 @@ export default { } }, + headerAlign(newVal) { + if (this.columnConfig) { + this.columnConfig.headerAlign = newVal ? 'is-' + newVal : this.align; + } + }, + width(newVal) { if (this.columnConfig) { this.columnConfig.width = newVal; diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js index b64200559..918cc30a6 100644 --- a/packages/table/src/table-header.js +++ b/packages/table/src/table-header.js @@ -103,7 +103,7 @@ export default { 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 || '', rowIndex === 0 && this.isCellHidden(cellIndex) ? 'is-hidden' : '', !column.children ? 'is-leaf' : ''] }> + class={ [column.id, column.order, column.headerAlign, column.className || '', rowIndex === 0 && this.isCellHidden(cellIndex) ? 'is-hidden' : '', !column.children ? 'is-leaf' : ''] }>
0 ? 'highlight' : ''] }> { column.renderHeader diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js index ef0355d59..a1d36efd0 100644 --- a/test/unit/specs/table.spec.js +++ b/test/unit/specs/table.spec.js @@ -1215,6 +1215,43 @@ describe('Table', () => { }, DELAY); }); + it('header-align', (done) => { + const vm = createVue({ + template: ` + + + + `, + + data() { + return { + align: 'left', + headerAlign: null + }; + }, + + created() { + this.testData = getTestData(); + } + }, true); + + setTimeout(() => { + expect(vm.$el.querySelectorAll('.el-table__header th.is-left').length > 0).to.be.true; + expect(vm.$el.querySelectorAll('.el-table__header td.is-center').length === 0).to.be.true; + vm.align = 'right'; + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('.el-table__header th.is-right').length > 0).to.be.true; + expect(vm.$el.querySelectorAll('.el-table__header td.is-center').length === 0).to.be.true; + vm.headerAlign = 'center'; + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('.el-table__header th.is-right').length === 0).to.be.true; + expect(vm.$el.querySelectorAll('.el-table__header td.is-center').length > 0).to.be.true; + }); + }); + done(); + }, DELAY); + }); + it('width', (done) => { const vm = createVue({ template: `