Commit 096f2bfe9ce1a9659282b2b1f994c89fea1a76a2
1 parent
afea484f
fixed #1357
Showing
3 changed files
with
25 additions
and
10 deletions
Show diff stats
examples/routers/table.vue
@@ -21,7 +21,11 @@ | @@ -21,7 +21,11 @@ | ||
21 | title: '姓名', | 21 | title: '姓名', |
22 | key: 'name', | 22 | key: 'name', |
23 | width: 100, | 23 | width: 100, |
24 | - fixed: 'left' | 24 | + fixed: 'left', |
25 | + sortable: true, | ||
26 | + renderHeader: (h, params) => { | ||
27 | + return h('Tag', params.index) | ||
28 | + } | ||
25 | }, | 29 | }, |
26 | { | 30 | { |
27 | title: '年龄', | 31 | title: '年龄', |
1 | +export default { | ||
2 | + name: 'TableRenderHeader', | ||
3 | + functional: true, | ||
4 | + props: { | ||
5 | + render: Function, | ||
6 | + column: Object, | ||
7 | + index: Number | ||
8 | + }, | ||
9 | + render: (h, ctx) => { | ||
10 | + const params = { | ||
11 | + column: ctx.props.column, | ||
12 | + index: ctx.props.index | ||
13 | + }; | ||
14 | + return ctx.props.render(h, params); | ||
15 | + } | ||
16 | +}; | ||
0 | \ No newline at end of file | 17 | \ No newline at end of file |
src/components/table/table-head.vue
@@ -10,7 +10,8 @@ | @@ -10,7 +10,8 @@ | ||
10 | <template v-if="column.type === 'expand'"></template> | 10 | <template v-if="column.type === 'expand'"></template> |
11 | <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> | 11 | <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> |
12 | <template v-else> | 12 | <template v-else> |
13 | - <span v-html="renderHeader(column, index)"></span> | 13 | + <span v-if="!column.renderHeader">{{ column.title || '#' }}</span> |
14 | + <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header> | ||
14 | <span :class="[prefixCls + '-sort']" v-if="column.sortable"> | 15 | <span :class="[prefixCls + '-sort']" v-if="column.sortable"> |
15 | <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort(index, 'asc')"></i> | 16 | <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort(index, 'asc')"></i> |
16 | <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort(index, 'desc')"></i> | 17 | <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort(index, 'desc')"></i> |
@@ -58,13 +59,14 @@ | @@ -58,13 +59,14 @@ | ||
58 | import Checkbox from '../checkbox/checkbox.vue'; | 59 | import Checkbox from '../checkbox/checkbox.vue'; |
59 | import Poptip from '../poptip/poptip.vue'; | 60 | import Poptip from '../poptip/poptip.vue'; |
60 | import iButton from '../button/button.vue'; | 61 | import iButton from '../button/button.vue'; |
62 | + import renderHeader from './header'; | ||
61 | import Mixin from './mixin'; | 63 | import Mixin from './mixin'; |
62 | import Locale from '../../mixins/locale'; | 64 | import Locale from '../../mixins/locale'; |
63 | 65 | ||
64 | export default { | 66 | export default { |
65 | name: 'TableHead', | 67 | name: 'TableHead', |
66 | mixins: [ Mixin, Locale ], | 68 | mixins: [ Mixin, Locale ], |
67 | - components: { CheckboxGroup, Checkbox, Poptip, iButton }, | 69 | + components: { CheckboxGroup, Checkbox, Poptip, iButton, renderHeader }, |
68 | props: { | 70 | props: { |
69 | prefixCls: String, | 71 | prefixCls: String, |
70 | styleObject: Object, | 72 | styleObject: Object, |
@@ -122,13 +124,6 @@ | @@ -122,13 +124,6 @@ | ||
122 | } | 124 | } |
123 | ]; | 125 | ]; |
124 | }, | 126 | }, |
125 | - renderHeader (column, $index) { | ||
126 | - if ('renderHeader' in this.columns[$index]) { | ||
127 | - return this.columns[$index].renderHeader(column, $index); | ||
128 | - } else { | ||
129 | - return column.title || '#'; | ||
130 | - } | ||
131 | - }, | ||
132 | selectAll () { | 127 | selectAll () { |
133 | const status = !this.isSelectAll; | 128 | const status = !this.isSelectAll; |
134 | this.$parent.selectAll(status); | 129 | this.$parent.selectAll(status); |