Commit d2420c15f4c5c027ab0554fa267060cbfb5592d9
Committed by
GitHub

Merge pull request #4847 from icarusion/table-slot-scope
Table
Showing
3 changed files
with
34 additions
and
1 deletions
Show diff stats
src/components/table/cell.vue
@@ -24,17 +24,23 @@ | @@ -24,17 +24,23 @@ | ||
24 | :column="column" | 24 | :column="column" |
25 | :index="index" | 25 | :index="index" |
26 | :render="column.render"></table-expand> | 26 | :render="column.render"></table-expand> |
27 | + <table-slot | ||
28 | + v-if="renderType === 'slot'" | ||
29 | + :row="row" | ||
30 | + :column="column" | ||
31 | + :index="index"></table-slot> | ||
27 | </div> | 32 | </div> |
28 | </template> | 33 | </template> |
29 | <script> | 34 | <script> |
30 | import TableExpand from './expand'; | 35 | import TableExpand from './expand'; |
36 | + import TableSlot from './slot'; | ||
31 | import Icon from '../icon/icon.vue'; | 37 | import Icon from '../icon/icon.vue'; |
32 | import Checkbox from '../checkbox/checkbox.vue'; | 38 | import Checkbox from '../checkbox/checkbox.vue'; |
33 | import Tooltip from '../tooltip/tooltip.vue'; | 39 | import Tooltip from '../tooltip/tooltip.vue'; |
34 | 40 | ||
35 | export default { | 41 | export default { |
36 | name: 'TableCell', | 42 | name: 'TableCell', |
37 | - components: { Icon, Checkbox, TableExpand, Tooltip }, | 43 | + components: { Icon, Checkbox, TableExpand, TableSlot, Tooltip }, |
38 | props: { | 44 | props: { |
39 | prefixCls: String, | 45 | prefixCls: String, |
40 | row: Object, | 46 | row: Object, |
@@ -107,6 +113,8 @@ | @@ -107,6 +113,8 @@ | ||
107 | this.renderType = 'expand'; | 113 | this.renderType = 'expand'; |
108 | } else if (this.column.render) { | 114 | } else if (this.column.render) { |
109 | this.renderType = 'render'; | 115 | this.renderType = 'render'; |
116 | + } else if (this.column.slot) { | ||
117 | + this.renderType = 'slot'; | ||
110 | } else { | 118 | } else { |
111 | this.renderType = 'normal'; | 119 | this.renderType = 'normal'; |
112 | } | 120 | } |
1 | +export default { | ||
2 | + name: 'TableSlot', | ||
3 | + functional: true, | ||
4 | + inject: ['tableRoot'], | ||
5 | + props: { | ||
6 | + row: Object, | ||
7 | + index: Number, | ||
8 | + column: { | ||
9 | + type: Object, | ||
10 | + default: null | ||
11 | + } | ||
12 | + }, | ||
13 | + render: (h, ctx) => { | ||
14 | + return h('div', ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot]({ | ||
15 | + row: ctx.props.row, | ||
16 | + column: ctx.props.column, | ||
17 | + index: ctx.props.index | ||
18 | + })); | ||
19 | + } | ||
20 | +}; | ||
0 | \ No newline at end of file | 21 | \ No newline at end of file |
src/components/table/table.vue
@@ -114,6 +114,11 @@ | @@ -114,6 +114,11 @@ | ||
114 | name: 'Table', | 114 | name: 'Table', |
115 | mixins: [ Locale ], | 115 | mixins: [ Locale ], |
116 | components: { tableHead, tableBody, Spin }, | 116 | components: { tableHead, tableBody, Spin }, |
117 | + provide () { | ||
118 | + return { | ||
119 | + tableRoot: this | ||
120 | + }; | ||
121 | + }, | ||
117 | props: { | 122 | props: { |
118 | data: { | 123 | data: { |
119 | type: Array, | 124 | type: Array, |