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 | 17 | \ No newline at end of file | ... | ... |
examples/routers/table.vue
... | ... | @@ -2,6 +2,7 @@ |
2 | 2 | <Table border :columns="columns7" :data="data6" @on-expand="expand"></Table> |
3 | 3 | </template> |
4 | 4 | <script> |
5 | + import TableExpand from '../components/tableExpand.vue'; | |
5 | 6 | import etable from '../components/table.vue'; |
6 | 7 | export default { |
7 | 8 | components: { etable }, |
... | ... | @@ -13,7 +14,8 @@ |
13 | 14 | width: 50, |
14 | 15 | render: (h, params) => { |
15 | 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 | 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 | 0 | \ No newline at end of file |
src/components/table/table-body.vue