TableColumn: add align attribute, #78 (#94)

ElemeFE · Sep 20, 2016 · 56ed21d · 56ed21d
1 parent 76683d1
commit 56ed21d
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 2 deletions.
diff --git a/examples/docs/table.md b/examples/docs/table.md
@@ -865,3 +865,4 @@
 | formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | — | — |
 | show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | — | false |
 | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 property 属性  | — | — |
+| align | 对齐方式 | String | left, center, right | left |
diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
@@ -52,7 +52,7 @@ export default {
                   this._l(this.columns, (column) =>
                     <td
                       style={ this.getColumnWhiteSpaceStyle(column) }
-                      class={ column.id }
+                      class={ [column.id, column.align] }
                       on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                       on-mouseleave={ this.handleCellMouseLeave }>
                       {

diff --git a/packages/table/src/table-column.js b/packages/table/src/table-column.js
@@ -83,6 +83,7 @@ export default {
       type: Boolean,
       default: true
     },
+    align: String,
     showTooltipWhenOverflow: {
       type: Boolean,
       default: false
@@ -160,6 +161,7 @@ export default {
       minWidth,
       width,
       isColumnGroup,
+      align: this.align ? 'is-' + this.align : null,
       realWidth: width || minWidth,
       sortable: this.sortable,
       resizable: this.resizable,

diff --git a/packages/table/src/table-header.js b/packages/table/src/table-header.js
@@ -26,7 +26,7 @@ export default {
                         on-mouseout={ this.handleMouseOut }
                         on-mousedown={ ($event) => this.handleMouseDown($event, column) }
                         on-click={ ($event) => this.handleHeaderClick($event, column) }
-                        class={ [column.id, column.direction] }>
+                        class={ [column.id, column.direction, column.align] }>
                         {
                           [
                             column.headerTemplate

diff --git a/packages/theme-default/src/table.css b/packages/theme-default/src/table.css
@@ -62,6 +62,18 @@
       vertical-align: middle;
       position: relative;
       border-bottom: 1px solid var(--table-border-color);
+
+      @when center {
+        text-align: center;
+      }
+
+      @when left {
+        text-align: left;
+      }
+
+      @when right {
+        text-align: right;
+      }
     }
 
     @modifier border {