Commit 718e773fbc5db18dfd5bd3de7a249a0ca92a0699
1 parent
b8adf5cf
-
Showing
5 changed files
with
33 additions
and
39 deletions
Show diff stats
1 | +<template> | ||
2 | + <div>{{ name }}</div> | ||
3 | +</template> | ||
4 | +<script> | ||
5 | + export default { | ||
6 | + props: { | ||
7 | + name: String | ||
8 | + }, | ||
9 | + created () { | ||
10 | + console.log(this.name + ': 被创建'); | ||
11 | + }, | ||
12 | + destroyed () { | ||
13 | + console.log(this.name + ': 被销毁'); | ||
14 | + } | ||
15 | + } | ||
16 | +</script> | ||
0 | \ No newline at end of file | 17 | \ No newline at end of file |
examples/routers/table.vue
@@ -2,6 +2,7 @@ | @@ -2,6 +2,7 @@ | ||
2 | <Table border :columns="columns7" :data="data6" @on-expand="expand"></Table> | 2 | <Table border :columns="columns7" :data="data6" @on-expand="expand"></Table> |
3 | </template> | 3 | </template> |
4 | <script> | 4 | <script> |
5 | + import TableExpand from '../components/tableExpand.vue'; | ||
5 | import etable from '../components/table.vue'; | 6 | import etable from '../components/table.vue'; |
6 | export default { | 7 | export default { |
7 | components: { etable }, | 8 | components: { etable }, |
@@ -13,7 +14,8 @@ | @@ -13,7 +14,8 @@ | ||
13 | width: 50, | 14 | width: 50, |
14 | render: (h, params) => { | 15 | render: (h, params) => { |
15 | // return h(etable); | 16 | // return h(etable); |
16 | - return h('div', params.row.name) | 17 | +// return h('div', params.row.name) |
18 | + return h(TableExpand, { props: { name: params.row.name } }) | ||
17 | } | 19 | } |
18 | }, | 20 | }, |
19 | { | 21 | { |
1 | + | ||
2 | +export default { | ||
3 | + name: 'TableExpand', | ||
4 | + functional: true, | ||
5 | + props: { | ||
6 | + row: Object, | ||
7 | + render: Function, | ||
8 | + index: Number, | ||
9 | + }, | ||
10 | + render: (h, ctx) => { | ||
11 | + return ctx.props.render(h, {row: ctx.props.row, index: ctx.props.index}); | ||
12 | + } | ||
13 | +}; | ||
0 | \ No newline at end of file | 14 | \ No newline at end of file |
src/components/table/expand.vue deleted
1 | -<template> | ||
2 | - <div ref="cell"></div> | ||
3 | -</template> | ||
4 | -<script> | ||
5 | - import Vue from 'vue'; | ||
6 | - export default { | ||
7 | - name: 'TableExpand', | ||
8 | - props: { | ||
9 | - row: Object, | ||
10 | - render: Function, | ||
11 | - index: Number, | ||
12 | - }, | ||
13 | - methods: { | ||
14 | - compile () { | ||
15 | - if (this.render) { | ||
16 | - this.$el.innerHTML = ''; | ||
17 | - const component = new Vue({ | ||
18 | - functional: true, | ||
19 | - render: (h) => { | ||
20 | - return this.render(h, { | ||
21 | - row: this.row, | ||
22 | - index: this.index | ||
23 | - }); | ||
24 | - } | ||
25 | - }); | ||
26 | - const Cell = component.$mount(); | ||
27 | - this.$refs.cell.appendChild(Cell.$el); | ||
28 | - } | ||
29 | - } | ||
30 | - }, | ||
31 | - mounted () { | ||
32 | - this.$nextTick(() => { | ||
33 | - this.compile(); | ||
34 | - }); | ||
35 | - } | ||
36 | - }; | ||
37 | -</script> | ||
38 | \ No newline at end of file | 0 | \ No newline at end of file |
src/components/table/table-body.vue
@@ -38,7 +38,7 @@ | @@ -38,7 +38,7 @@ | ||
38 | <script> | 38 | <script> |
39 | // todo :key="row" | 39 | // todo :key="row" |
40 | import Cell from './cell.vue'; | 40 | import Cell from './cell.vue'; |
41 | - import Expand from './expand.vue'; | 41 | + import Expand from './expand.js'; |
42 | import Mixin from './mixin'; | 42 | import Mixin from './mixin'; |
43 | 43 | ||
44 | export default { | 44 | export default { |