Merge pull request #1895 from Kingwl/dev

Table: add header-align, Fixed #1424

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 |

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;

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' : ''] }>
                       <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : ''] }>
                       {
                         column.renderHeader

test/unit/specs/table.spec.js

@@ -1215,6 +1215,43 @@ describe('Table', () => {
       }, DELAY);
     });
 
+    it('header-align', (done) => {
+      const vm = createVue({
+        template: `
+           <el-table :data="testData">
+            <el-table-column prop="name" :align="align" :header-align="headerAlign"/>
+          </el-table>
+        `,
+
+        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: `