Commit 6b23d43ba5f373a6228bc44ed07054cf23015cca
Merge branch 'iview-2.0' into 2.0
Showing
9 changed files
with
84 additions
and
126 deletions
Show diff stats
build/webpack.dev.config.js
... | ... | @@ -27,8 +27,8 @@ module.exports = merge(webpackBaseConfig, { |
27 | 27 | resolve: { |
28 | 28 | alias: { |
29 | 29 | iview: '../../src/index', |
30 | - // vue: 'vue/dist/vue.esm.js' | |
31 | - vue: 'vue/dist/vue.runtime.js' | |
30 | + vue: 'vue/dist/vue.esm.js' | |
31 | + // vue: 'vue/dist/vue.runtime.js' | |
32 | 32 | } |
33 | 33 | }, |
34 | 34 | plugins: [ | ... | ... |
examples/components/test.vue
1 | 1 | <template> |
2 | - <div>123</div> | |
2 | + <div>{{ row.name }}</div> | |
3 | 3 | </template> |
4 | 4 | <script> |
5 | 5 | export default { |
6 | - | |
6 | + props: { | |
7 | + row: Object | |
8 | + }, | |
9 | + mounted () { | |
10 | + console.log(1); | |
11 | + }, | |
12 | + beforeDestroy () { | |
13 | + console.log(2); | |
14 | + } | |
7 | 15 | } |
8 | 16 | </script> |
9 | 17 | \ No newline at end of file | ... | ... |
examples/routers/table.vue
1 | 1 | <template> |
2 | - <Table border :columns="columns7" :data="data6" @on-expand="expand"></Table> | |
2 | + <Table border :columns="columns5" :data="data5"></Table> | |
3 | 3 | </template> |
4 | 4 | <script> |
5 | - import TableExpand from '../components/tableExpand.vue'; | |
6 | 5 | import etable from '../components/table.vue'; |
6 | + import test from '../components/test.vue'; | |
7 | 7 | export default { |
8 | - components: { etable }, | |
9 | 8 | data () { |
10 | 9 | return { |
11 | - columns7: [ | |
10 | + columns5: [ | |
12 | 11 | { |
13 | 12 | type: 'expand', |
14 | - width: 50, | |
15 | - render: (h, params) => { | |
16 | -// return h(etable); | |
17 | -// return h('div', params.row.name) | |
18 | - return h(TableExpand, { props: { name: params.row.name } }) | |
19 | - } | |
13 | + render: (h) => { | |
14 | + return h(etable); | |
15 | + }, | |
16 | + width: 50 | |
17 | + }, | |
18 | + { | |
19 | + title: '日期', | |
20 | + key: 'date', | |
21 | + sortable: true | |
20 | 22 | }, |
21 | 23 | { |
22 | 24 | title: '姓名', |
23 | - key: 'name', | |
24 | - render: (h, params) => { | |
25 | - return h('div', [ | |
26 | - h('Icon', { | |
27 | - props: { | |
28 | - type: 'person' | |
29 | - } | |
30 | - }), | |
31 | - h('strong', params.row.name) | |
32 | - ]); | |
33 | - } | |
25 | + key: 'name' | |
34 | 26 | }, |
35 | 27 | { |
36 | 28 | title: '年龄', |
... | ... | @@ -43,80 +35,43 @@ |
43 | 35 | }, |
44 | 36 | { |
45 | 37 | title: '操作', |
46 | - key: 'action', | |
47 | - width: 150, | |
48 | - align: 'center', | |
38 | + key: 'name', | |
49 | 39 | render: (h, params) => { |
50 | - return h('div', [ | |
51 | - h('Button', { | |
52 | - props: { | |
53 | - type: 'primary', | |
54 | - size: 'small' | |
55 | - }, | |
56 | - style: { | |
57 | - marginRight: '5px' | |
58 | - }, | |
59 | - on: { | |
60 | - click: () => { | |
61 | - this.show(params.index) | |
62 | - } | |
63 | - } | |
64 | - }, '查看'), | |
65 | - h('Button', { | |
66 | - props: { | |
67 | - type: 'error', | |
68 | - size: 'small' | |
69 | - }, | |
70 | - on: { | |
71 | - click: () => { | |
72 | - this.remove(params.index) | |
73 | - } | |
74 | - } | |
75 | - }, '删除') | |
76 | - ]); | |
40 | + return h(test, { | |
41 | + props: { | |
42 | + row: params.row | |
43 | + } | |
44 | + }); | |
77 | 45 | } |
78 | 46 | } |
79 | 47 | ], |
80 | - data6: [ | |
48 | + data5: [ | |
81 | 49 | { |
82 | 50 | name: '王小明', |
83 | 51 | age: 18, |
84 | - address: '北京市朝阳区芍药居' | |
52 | + address: '北京市朝阳区芍药居', | |
53 | + date: '2016-10-03' | |
85 | 54 | }, |
86 | 55 | { |
87 | 56 | name: '张小刚', |
88 | 57 | age: 25, |
89 | 58 | address: '北京市海淀区西二旗', |
90 | - _disableExpand: true | |
59 | + date: '2016-10-01' | |
91 | 60 | }, |
92 | 61 | { |
93 | 62 | name: '李小红', |
94 | 63 | age: 30, |
95 | 64 | address: '上海市浦东新区世纪大道', |
96 | - _expanded: true | |
65 | + date: '2016-10-02' | |
97 | 66 | }, |
98 | 67 | { |
99 | 68 | name: '周小伟', |
100 | 69 | age: 26, |
101 | - address: '深圳市南山区深南大道' | |
102 | - } | |
70 | + address: '深圳市南山区深南大道', | |
71 | + date: '2016-10-04' | |
72 | + }, | |
103 | 73 | ] |
104 | 74 | } |
105 | - }, | |
106 | - methods: { | |
107 | - show (index) { | |
108 | - this.$Modal.info({ | |
109 | - title: '用户信息', | |
110 | - content: `姓名:${this.data6[index].name}<br>年龄:${this.data6[index].age}<br>地址:${this.data6[index].address}` | |
111 | - }) | |
112 | - }, | |
113 | - remove (index) { | |
114 | - this.data6.splice(index, 1); | |
115 | - }, | |
116 | - expand (row, s) { | |
117 | -// console.log(row); | |
118 | -// console.log(s); | |
119 | - } | |
120 | 75 | } |
121 | 76 | } |
122 | 77 | </script> | ... | ... |
src/components/base/render.vue deleted
1 | -<template> | |
2 | - <div ref="cell"></div> | |
3 | -</template> | |
4 | -<script> | |
5 | - import Vue from 'vue'; | |
6 | - export default { | |
7 | - name: 'RenderCell', | |
8 | - props: { | |
9 | - render: Function | |
10 | - }, | |
11 | - methods: { | |
12 | - compile () { | |
13 | - if (this.render) { | |
14 | - this.$el.innerHTML = ''; | |
15 | - const component = new Vue({ | |
16 | - functional: true, | |
17 | - render: (h) => { | |
18 | - return this.render(h); | |
19 | - } | |
20 | - }); | |
21 | - const Cell = component.$mount(); | |
22 | - this.$refs.cell.appendChild(Cell.$el); | |
23 | - } | |
24 | - } | |
25 | - }, | |
26 | - mounted () { | |
27 | - this.compile(); | |
28 | - } | |
29 | - }; | |
30 | -</script> | |
31 | 0 | \ No newline at end of file |
src/components/table/cell.vue
... | ... | @@ -10,17 +10,24 @@ |
10 | 10 | <Icon type="ios-arrow-right"></Icon> |
11 | 11 | </div> |
12 | 12 | </template> |
13 | + <Cell | |
14 | + v-if="renderType === 'render'" | |
15 | + :row="row" | |
16 | + :column="column" | |
17 | + :index="index" | |
18 | + :render="column.render"></Cell> | |
13 | 19 | </div> |
14 | 20 | </template> |
15 | 21 | <script> |
16 | 22 | import Vue from 'vue'; |
23 | + import Cell from './expand'; | |
17 | 24 | import Icon from '../icon/icon.vue'; |
18 | 25 | import Checkbox from '../checkbox/checkbox.vue'; |
19 | 26 | import { findComponentUpward } from '../../utils/assist'; |
20 | 27 | |
21 | 28 | export default { |
22 | 29 | name: 'TableCell', |
23 | - components: { Icon, Checkbox }, | |
30 | + components: { Icon, Checkbox, Cell }, | |
24 | 31 | props: { |
25 | 32 | prefixCls: String, |
26 | 33 | row: Object, |
... | ... | @@ -65,25 +72,25 @@ |
65 | 72 | methods: { |
66 | 73 | compile () { |
67 | 74 | if (this.column.render && this.renderType === 'render') { |
68 | - // 兼容真 Render,后期废弃旧用法 | |
75 | + // todo 兼容真 Render,后期废弃旧用法 | |
69 | 76 | let isRealRender = true; |
70 | 77 | const Table = findComponentUpward(this, 'Table'); |
71 | 78 | if (Table.context) isRealRender = false; |
72 | 79 | |
73 | 80 | if (isRealRender) { |
74 | - this.$el.innerHTML = ''; | |
75 | - const component = new Vue({ | |
76 | - functional: true, | |
77 | - render: (h) => { | |
78 | - return this.column.render(h, { | |
79 | - row: this.row, | |
80 | - column: this.column, | |
81 | - index: this.index | |
82 | - }); | |
83 | - } | |
84 | - }); | |
85 | - const Cell = component.$mount(); | |
86 | - this.$refs.cell.appendChild(Cell.$el); | |
81 | +// this.$el.innerHTML = ''; | |
82 | +// const component = new Vue({ | |
83 | +// functional: true, | |
84 | +// render: (h) => { | |
85 | +// return this.column.render(h, { | |
86 | +// row: this.row, | |
87 | +// column: this.column, | |
88 | +// index: this.index | |
89 | +// }); | |
90 | +// } | |
91 | +// }); | |
92 | +// const Cell = component.$mount(); | |
93 | +// this.$refs.cell.appendChild(Cell.$el); | |
87 | 94 | } else { |
88 | 95 | const $parent = this.context; |
89 | 96 | const template = this.column.render(this.row, this.column, this.index); | ... | ... |
src/components/table/expand.js
1 | - | |
2 | 1 | export default { |
3 | 2 | name: 'TableExpand', |
4 | 3 | functional: true, |
... | ... | @@ -6,8 +5,17 @@ export default { |
6 | 5 | row: Object, |
7 | 6 | render: Function, |
8 | 7 | index: Number, |
8 | + column: { | |
9 | + type: Object, | |
10 | + default: null | |
11 | + } | |
9 | 12 | }, |
10 | 13 | render: (h, ctx) => { |
11 | - return ctx.props.render(h, {row: ctx.props.row, index: ctx.props.index}); | |
14 | + const params = { | |
15 | + row: ctx.props.row, | |
16 | + index: ctx.props.index | |
17 | + }; | |
18 | + if (ctx.props.column) params.column = ctx.props.column; | |
19 | + return ctx.props.render(h, params); | |
12 | 20 | } |
13 | 21 | }; |
14 | 22 | \ No newline at end of file | ... | ... |
src/components/table/table-body.vue
... | ... | @@ -6,7 +6,6 @@ |
6 | 6 | <tbody :class="[prefixCls + '-tbody']"> |
7 | 7 | <template v-for="(row, index) in data"> |
8 | 8 | <tr |
9 | - :key="row" | |
10 | 9 | :class="rowClasses(row._index)" |
11 | 10 | @mouseenter.stop="handleMouseIn(row._index)" |
12 | 11 | @mouseleave.stop="handleMouseOut(row._index)" |
... | ... | @@ -17,6 +16,7 @@ |
17 | 16 | :fixed="fixed" |
18 | 17 | :prefix-cls="prefixCls" |
19 | 18 | :row="row" |
19 | + :key="row" | |
20 | 20 | :column="column" |
21 | 21 | :natural-index="index" |
22 | 22 | :index="row._index" |
... | ... | @@ -28,7 +28,7 @@ |
28 | 28 | </tr> |
29 | 29 | <tr v-if="rowExpanded(row._index)"> |
30 | 30 | <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'"> |
31 | - <Expand :row="row" :render="expandRender" :index="row._index"></Expand> | |
31 | + <Expand :key="row" :row="row" :render="expandRender" :index="row._index"></Expand> | |
32 | 32 | </td> |
33 | 33 | </tr> |
34 | 34 | </template> | ... | ... |
src/components/tabs/tabs.vue
... | ... | @@ -23,7 +23,7 @@ |
23 | 23 | </template> |
24 | 24 | <script> |
25 | 25 | import Icon from '../icon/icon.vue'; |
26 | - import Render from '../base/render.vue'; | |
26 | + import Render from '../base/render'; | |
27 | 27 | import { oneOf, getStyle } from '../../utils/assist'; |
28 | 28 | import Emitter from '../../mixins/emitter'; |
29 | 29 | ... | ... |