Table: add row-style prop.

ElemeFE · Nov 24, 2016 · e422967 · e422967
1 parent a3f5707
commit e422967
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 3 deletions.
diff --git a/examples/docs/en-US/table.md b/examples/docs/en-US/table.md
@@ -1183,7 +1183,8 @@ Customize table column so it can be integrated with other components.
 | 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-class-name | function that returns custom class names for a row. If its value is a string, the value will be every row's class name | Function(row, index)/String | — | — |
+| row-style | function that returns custom style for a row. If its value is a object, the value will be every row's style | Function(row, index)/Object | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — |
 | context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | - | current context where Table lies |
 

diff --git a/examples/docs/zh-CN/table.md b/examples/docs/zh-CN/table.md
@@ -1188,7 +1188,8 @@
 | fit | 列的宽度是否自撑开 | boolean | — | true |
 | show-header | 是否显示表头 | boolean | - | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |
-| row-class-name | 行的 className 的回调。 | Function(row, index) | — | — |
+| row-class-name | 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 | Function(row, index)/String | — | — |
+| row-style | 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function(row, index)/Object | — | — |
 | row-key | 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的 | Function(row)/String | — | — |
 | context | 设置上下文环境，例如设置当前上下文就是 `_self`，父级就是 `$parent`，根组件 `$root`。优先读取 column 的 context 属性。 | Object | - | Table 所处上下文 |
 

diff --git a/packages/table/src/table-body.js b/packages/table/src/table-body.js
@@ -10,6 +10,7 @@ export default {
       required: true
     },
     rowClassName: [String, Function],
+    rowStyle: [Object, Function],
     fixed: String,
     highlight: Boolean
   },
@@ -33,6 +34,7 @@ export default {
           {
             this._l(this.data, (row, $index) =>
               <tr
+                style={ this.rowStyle ? this.getRowStyle(row, $index) : null }
                 key={ this.$parent.rowKey ? this.getKeyOfRow(row, $index) : $index }
                 on-click={ ($event) => this.handleClick($event, row) }
                 on-mouseenter={ _ => this.handleMouseEnter($index) }
@@ -140,14 +142,22 @@ export default {
       }
     },
 
+    getRowStyle(row, index) {
+      const rowStyle = this.rowStyle;
+      if (typeof rowStyle === 'function') {
+        return rowStyle.call(null, row, index);
+      }
+      return rowStyle;
+    },
+
     getRowClass(row, index) {
       const classes = [];
 
       const rowClassName = this.rowClassName;
       if (typeof rowClassName === 'string') {
         classes.push(rowClassName);
       } else if (typeof rowClassName === 'function') {
-        classes.push(rowClassName.apply(null, [row, index]) || '');
+        classes.push(rowClassName.call(null, row, index) || '');
       }
 
       return classes.join(' ');

diff --git a/packages/table/src/table.vue b/packages/table/src/table.vue
@@ -24,6 +24,7 @@
         :store="store"
         :layout="layout"
         :row-class-name="rowClassName"
+        :row-style="rowStyle"
         :highlight="highlightCurrentRow"
         :style="{ width: layout.bodyWidth ? layout.bodyWidth - (layout.scrollY ? layout.gutterWidth : 0 ) + 'px' : '' }">
       </table-body>
@@ -56,6 +57,7 @@
           :layout="layout"
           :highlight="highlightCurrentRow"
           :row-class-name="rowClassName"
+          :row-style="rowStyle"
           :style="{ width: layout.fixedWidth ? layout.fixedWidth + 'px' : '' }">
         </table-body>
       </div>
@@ -85,6 +87,7 @@
           :store="store"
           :layout="layout"
           :row-class-name="rowClassName"
+          :row-style="rowStyle"
           :highlight="highlightCurrentRow"
           :style="{ width: layout.rightFixedWidth ? layout.rightFixedWidth + 'px' : '' }">
         </table-body>
@@ -145,6 +148,8 @@
 
       rowClassName: [String, Function],
 
+      rowStyle: [Object, Function],
+
       highlightCurrentRow: Boolean,
 
       emptyText: {

diff --git a/test/unit/specs/table.spec.js b/test/unit/specs/table.spec.js
@@ -147,6 +147,37 @@ describe('Table', () => {
         done();
       }, DELAY);
     });
+
+    it('tableRowStyle[Object]', done => {
+      const vm = createTable(':row-style="{ height: \'60px\' }"', {});
+
+      setTimeout(_ => {
+        expect(vm.$el.querySelector('.el-table__body tr').style.height).to.equal('60px');
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
+
+    it('tableRowStyle[Function]', done => {
+      const vm = createTable(':row-style="tableRowStyle"', {
+        methods: {
+          tableRowStyle(row, index) {
+            if (index === 1) {
+              return { height: '60px' };
+            }
+
+            return null;
+          }
+        }
+      });
+
+      setTimeout(_ => {
+        expect(vm.$el.querySelector('.el-table__body tr:nth-child(1)').style.height).to.equal('');
+        expect(vm.$el.querySelector('.el-table__body tr:nth-child(2)').style.height).to.equal('60px');
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
   });
 
   describe('filter', () => {