fixed #1357

examples/routers/table.vue

@@ -21,7 +21,11 @@
                         title: '姓名',
                         key: 'name',
                         width: 100,
-                        fixed: 'left'
+                        fixed: 'left',
+                        sortable: true,
+                        renderHeader: (h, params) => {
+                            return h('Tag', params.index)
+                        }
                     },
                     {
                         title: '年龄',

src/components/table/header.js

@@ -0,0 +1,16 @@
+export default {
+    name: 'TableRenderHeader',
+    functional: true,
+    props: {
+        render: Function,
+        column: Object,
+        index: Number
+    },
+    render: (h, ctx) => {
+        const params = {
+            column: ctx.props.column,
+            index: ctx.props.index
+        };
+        return ctx.props.render(h, params);
+    }
+};

src/components/table/table-head.vue

@@ -10,7 +10,8 @@
                         <template v-if="column.type === 'expand'"></template>
                         <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
                         <template v-else>
-                            <span v-html="renderHeader(column, index)"></span>
+                            <span v-if="!column.renderHeader">{{ column.title || '#' }}</span>
+                            <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
                             <span :class="[prefixCls + '-sort']" v-if="column.sortable">
                                 <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort(index, 'asc')"></i>
                                 <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort(index, 'desc')"></i>
@@ -58,13 +59,14 @@
     import Checkbox from '../checkbox/checkbox.vue';
     import Poptip from '../poptip/poptip.vue';
     import iButton from '../button/button.vue';
+    import renderHeader from './header';
     import Mixin from './mixin';
     import Locale from '../../mixins/locale';
 
     export default {
         name: 'TableHead',
         mixins: [ Mixin, Locale ],
-        components: { CheckboxGroup, Checkbox, Poptip, iButton },
+        components: { CheckboxGroup, Checkbox, Poptip, iButton, renderHeader },
         props: {
             prefixCls: String,
             styleObject: Object,
@@ -122,13 +124,6 @@
                     }
                 ];
             },
-            renderHeader (column, $index) {
-                if ('renderHeader' in this.columns[$index]) {
-                    return this.columns[$index].renderHeader(column, $index);
-                } else {
-                    return column.title || '#';
-                }
-            },
             selectAll () {
                 const status = !this.isSelectAll;
                 this.$parent.selectAll(status);