diff --git a/examples/routers/table.vue b/examples/routers/table.vue index c9fdb31..9a9f96c 100644 --- a/examples/routers/table.vue +++ b/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: '年龄', diff --git a/src/components/table/header.js b/src/components/table/header.js new file mode 100644 index 0000000..ca3154a --- /dev/null +++ b/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); + } +}; \ No newline at end of file diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue index 563e1d7..63d048b 100644 --- a/src/components/table/table-head.vue +++ b/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); -- libgit2 0.21.4