Table: add renderHeader prop. (#838)

CHANGELOG.md

@@ -15,7 +15,8 @@
 - 改善 tabs 现在支持动态更新
 - Table 新增 highlightCurrentRow 属性、新增 current-change 事件
 - TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）
-- Pagination 新增 pageCount 属性
+- TableColumn 新增属性 render-header
+- Pagination 新增属性 pageCount
 
 #### 非兼容性更新
 

examples/docs/zh-cn/table.md

@@ -924,15 +924,16 @@
 ### Table-column Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
+| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
 | label | 显示的标题 | string | — | — |
 | prop | 对应列内容的字段名，也可以使用 property 属性 | string | — | — |
 | width | 对应列的宽度 | string | — | — |
 | min-width | 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — |
 | fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | string, boolean | true, left, right | - |
+| render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | - | - |
 | sortable | 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
 | sort-method | 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效 | Function(a, b) | - | - |
 | resizable | 对应列是否可以通过拖动改变宽度（如果需要在 el-table 上设置 border 属性为真） | boolean | — | true |
-| type | 对应列的类型。如果设置了 `selection` 则显示多选框，如果设置了 `index` 则显示该行的索引（从 1 开始计算） | string | selection/index | — |
 | formatter | 用来格式化内容 | Function(row, column) | — | — |
 | show-overflow-tooltip | 当过长被隐藏时显示 tooltip | Boolean | — | false |
 | inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息，JSX 里通过 _self 获取当前上下文。此时不需要配置 prop 属性。总共可以获取到 `{ row(当前行), column(当前列), $index(行数), _self(当前上下文), store(table store) }` 的信息。 | — | — |

examples/docs/zh-cn/tree.md

@@ -235,7 +235,7 @@
 | props | 配置选项，具体看下表 | object | — | — |
 | load | 加载子树数据的方法 | function(node, resolve) | — | — |
 | show-checkbox | 节点是否可被选择 | boolean | — | false |
-| render-content | 树节点的内容区的渲染 Function，会传入两个参数，h 与 { node: node }。 | Function | - | - |
+| render-content | 树节点的内容区的渲染 Function | Function(h, { node } | - | - |
 | highlight-current | 是否高亮当前选中节点，默认值是 false。| boolean | - | false |
 
 ### props

packages/table/src/table-body.js

@@ -42,8 +42,8 @@ export default {
                       on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                       on-mouseleave={ this.handleCellMouseLeave }>
                       {
-                        column.template
+                        column.renderCell
-                          ? column.template.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.$parent.$vnode.context })
+                          ? column.renderCell.call(this._renderProxy, h, { row, column, $index, store: this.store, _self: this.$parent.$vnode.context })
                           : <div class="cell">{ this.getCellContent(row, column.property, column.id) }</div>
                       }
                     </td>

packages/table/src/table-column.js

@@ -24,26 +24,25 @@ const defaults = {
 
 const forced = {
   selection: {
-    headerTemplate: function(h) {
+    renderHeader: function(h) {
       return <el-checkbox
         nativeOn-click={ this.toggleAllSelection }
         domProps-value={ this.isAllSelected } />;
     },
-    template: function(h, { row, column, store, $index }) {
+    renderCell: function(h, { row, column, store, $index }) {
       return <el-checkbox
         domProps-value={ store.isSelected(row) }
         disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
-        on-input={ (value) => { store.commit('rowSelectedChanged', row); } } />;
+        on-input={ () => { store.commit('rowSelectedChanged', row); } } />;
     },
     sortable: false,
     resizable: false
   },
   index: {
-    // headerTemplate: function(h) { return <div>#</div>; },
+    renderHeader: function(h, { column }) {
-    headerTemplate: function(h, label) {
+      return column.label || '#';
-      return label || '#';
     },
-    template: function(h, { $index }) {
+    renderCell: function(h, { $index }) {
       return <div>{ $index + 1 }</div>;
     },
     sortable: false
@@ -73,6 +72,10 @@ const getDefaultColumn = function(type, options) {
   return column;
 };
 
+const DEFAULT_RENDER_CELL = function(h, { row, column }, parent) {
+  return <span>{ parent.getCellContent(row, column.property, column.id) }</span>;
+};
+
 export default {
   name: 'el-table-column',
 
@@ -86,7 +89,7 @@ export default {
     prop: String,
     width: {},
     minWidth: {},
-    template: String,
+    renderHeader: Function,
     sortable: {
       type: [Boolean, String],
       default: false
@@ -170,21 +173,14 @@ export default {
     }
 
     let isColumnGroup = false;
-    let template;
-
-    let property = this.prop || this.property;
-    if (property) {
-      template = function(h, { row }, parent) {
-        return <span>{ parent.getCellContent(row, property, columnId) }</span>;
-      };
-    }
 
     let column = getDefaultColumn(type, {
       id: columnId,
       label: this.label,
-      property,
+      property: this.prop || this.property,
       type,
-      template,
+      renderCell: DEFAULT_RENDER_CELL,
+      renderHeader: this.renderHeader,
       minWidth,
       width,
       isColumnGroup,
@@ -207,12 +203,12 @@ export default {
 
     objectAssign(column, forced[type] || {});
 
-    let renderColumn = column.template;
+    let renderCell = column.renderCell;
     let _self = this;
 
-    column.template = function(h, data) {
+    column.renderCell = function(h, data) {
       if (_self.$vnode.data.inlineTemplate) {
-        renderColumn = function() {
+        renderCell = function() {
           data._staticTrees = _self._staticTrees;
           data.$options = {};
           data.$options.staticRenderFns = _self.$options.staticRenderFns;
@@ -228,10 +224,10 @@ export default {
             effect={ this.effect }
             placement="top"
             disabled={ this.tooltipDisabled }>
-            <div class="cell">{ renderColumn(h, data, this._renderProxy) }</div>
+            <div class="cell">{ renderCell(h, data, this._renderProxy) }</div>
-            <span slot="content">{ renderColumn(h, data, this._renderProxy) }</span>
+            <span slot="content">{ renderCell(h, data, this._renderProxy) }</span>
           </el-tooltip>
-        : <div class="cell">{ renderColumn(h, data, this._renderProxy) }</div>;
+        : <div class="cell">{ renderCell(h, data, this._renderProxy) }</div>;
     };
 
     this.columnConfig = column;

packages/table/src/table-header.js

@@ -36,8 +36,8 @@ export default {
                   class={ [column.id, column.order, column.align, this.isCellHidden(cellIndex) ? 'is-hidden' : ''] }>
                   <div class={ ['cell', column.filteredValue && column.filteredValue.length > 0 ? 'highlight' : ''] }>
                   {
-                    column.headerTemplate
+                    column.renderHeader
-                      ? column.headerTemplate.call(this._renderProxy, h, column.label)
+                      ? column.renderHeader.call(this._renderProxy, h, { column, $index: cellIndex, store: this.store, _self: this.$parent.$vnode.context })
                       : column.label
                   }
                   {

test/unit/specs/table.spec.js

@@ -526,6 +526,37 @@ describe('Table', () => {
       }, DELAY);
     });
 
+    it('render-header', done => {
+      const vm = createVue({
+        template: `
+          <el-table :data="testData">
+            <el-table-column prop="name" :render-header="renderHeader" label="name">
+            </el-table-column>
+            <el-table-column prop="release"/>
+            <el-table-column prop="director"/>
+            <el-table-column prop="runtime"/>
+          </el-table>
+        `,
+
+        methods: {
+          renderHeader(h, { column, $index }) {
+            return '' + $index + ':' + column.label;
+          }
+        },
+
+        created() {
+          this.testData = getTestData();
+        }
+      });
+
+      setTimeout(_ => {
+        const headerCell = vm.$el.querySelector('.el-table__header-wrapper thead tr th:first-child .cell');
+        expect(headerCell.textContent).to.equal('0:name');
+        destroyVM(vm);
+        done();
+      }, DELAY);
+    });
+
     it('align', done => {
       const vm = createTable('align="left"', 'align="right"', 'align="center"');
       setTimeout(_ => {