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,8 +27,8 @@ module.exports = merge(webpackBaseConfig, { | ||
27 | resolve: { | 27 | resolve: { |
28 | alias: { | 28 | alias: { |
29 | iview: '../../src/index', | 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 | plugins: [ | 34 | plugins: [ |
examples/components/test.vue
1 | <template> | 1 | <template> |
2 | - <div>123</div> | 2 | + <div>{{ row.name }}</div> |
3 | </template> | 3 | </template> |
4 | <script> | 4 | <script> |
5 | export default { | 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 | </script> | 16 | </script> |
9 | \ No newline at end of file | 17 | \ No newline at end of file |
examples/routers/table.vue
1 | <template> | 1 | <template> |
2 | - <Table border :columns="columns7" :data="data6" @on-expand="expand"></Table> | 2 | + <Table border :columns="columns5" :data="data5"></Table> |
3 | </template> | 3 | </template> |
4 | <script> | 4 | <script> |
5 | - import TableExpand from '../components/tableExpand.vue'; | ||
6 | import etable from '../components/table.vue'; | 5 | import etable from '../components/table.vue'; |
6 | + import test from '../components/test.vue'; | ||
7 | export default { | 7 | export default { |
8 | - components: { etable }, | ||
9 | data () { | 8 | data () { |
10 | return { | 9 | return { |
11 | - columns7: [ | 10 | + columns5: [ |
12 | { | 11 | { |
13 | type: 'expand', | 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 | title: '姓名', | 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 | title: '年龄', | 28 | title: '年龄', |
@@ -43,80 +35,43 @@ | @@ -43,80 +35,43 @@ | ||
43 | }, | 35 | }, |
44 | { | 36 | { |
45 | title: '操作', | 37 | title: '操作', |
46 | - key: 'action', | ||
47 | - width: 150, | ||
48 | - align: 'center', | 38 | + key: 'name', |
49 | render: (h, params) => { | 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 | name: '王小明', | 50 | name: '王小明', |
83 | age: 18, | 51 | age: 18, |
84 | - address: '北京市朝阳区芍药居' | 52 | + address: '北京市朝阳区芍药居', |
53 | + date: '2016-10-03' | ||
85 | }, | 54 | }, |
86 | { | 55 | { |
87 | name: '张小刚', | 56 | name: '张小刚', |
88 | age: 25, | 57 | age: 25, |
89 | address: '北京市海淀区西二旗', | 58 | address: '北京市海淀区西二旗', |
90 | - _disableExpand: true | 59 | + date: '2016-10-01' |
91 | }, | 60 | }, |
92 | { | 61 | { |
93 | name: '李小红', | 62 | name: '李小红', |
94 | age: 30, | 63 | age: 30, |
95 | address: '上海市浦东新区世纪大道', | 64 | address: '上海市浦东新区世纪大道', |
96 | - _expanded: true | 65 | + date: '2016-10-02' |
97 | }, | 66 | }, |
98 | { | 67 | { |
99 | name: '周小伟', | 68 | name: '周小伟', |
100 | age: 26, | 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 | </script> | 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 | \ No newline at end of file | 0 | \ No newline at end of file |
src/components/table/cell.vue
@@ -10,17 +10,24 @@ | @@ -10,17 +10,24 @@ | ||
10 | <Icon type="ios-arrow-right"></Icon> | 10 | <Icon type="ios-arrow-right"></Icon> |
11 | </div> | 11 | </div> |
12 | </template> | 12 | </template> |
13 | + <Cell | ||
14 | + v-if="renderType === 'render'" | ||
15 | + :row="row" | ||
16 | + :column="column" | ||
17 | + :index="index" | ||
18 | + :render="column.render"></Cell> | ||
13 | </div> | 19 | </div> |
14 | </template> | 20 | </template> |
15 | <script> | 21 | <script> |
16 | import Vue from 'vue'; | 22 | import Vue from 'vue'; |
23 | + import Cell from './expand'; | ||
17 | import Icon from '../icon/icon.vue'; | 24 | import Icon from '../icon/icon.vue'; |
18 | import Checkbox from '../checkbox/checkbox.vue'; | 25 | import Checkbox from '../checkbox/checkbox.vue'; |
19 | import { findComponentUpward } from '../../utils/assist'; | 26 | import { findComponentUpward } from '../../utils/assist'; |
20 | 27 | ||
21 | export default { | 28 | export default { |
22 | name: 'TableCell', | 29 | name: 'TableCell', |
23 | - components: { Icon, Checkbox }, | 30 | + components: { Icon, Checkbox, Cell }, |
24 | props: { | 31 | props: { |
25 | prefixCls: String, | 32 | prefixCls: String, |
26 | row: Object, | 33 | row: Object, |
@@ -65,25 +72,25 @@ | @@ -65,25 +72,25 @@ | ||
65 | methods: { | 72 | methods: { |
66 | compile () { | 73 | compile () { |
67 | if (this.column.render && this.renderType === 'render') { | 74 | if (this.column.render && this.renderType === 'render') { |
68 | - // 兼容真 Render,后期废弃旧用法 | 75 | + // todo 兼容真 Render,后期废弃旧用法 |
69 | let isRealRender = true; | 76 | let isRealRender = true; |
70 | const Table = findComponentUpward(this, 'Table'); | 77 | const Table = findComponentUpward(this, 'Table'); |
71 | if (Table.context) isRealRender = false; | 78 | if (Table.context) isRealRender = false; |
72 | 79 | ||
73 | if (isRealRender) { | 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 | } else { | 94 | } else { |
88 | const $parent = this.context; | 95 | const $parent = this.context; |
89 | const template = this.column.render(this.row, this.column, this.index); | 96 | const template = this.column.render(this.row, this.column, this.index); |
src/components/table/expand.js
1 | - | ||
2 | export default { | 1 | export default { |
3 | name: 'TableExpand', | 2 | name: 'TableExpand', |
4 | functional: true, | 3 | functional: true, |
@@ -6,8 +5,17 @@ export default { | @@ -6,8 +5,17 @@ export default { | ||
6 | row: Object, | 5 | row: Object, |
7 | render: Function, | 6 | render: Function, |
8 | index: Number, | 7 | index: Number, |
8 | + column: { | ||
9 | + type: Object, | ||
10 | + default: null | ||
11 | + } | ||
9 | }, | 12 | }, |
10 | render: (h, ctx) => { | 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 | \ No newline at end of file | 22 | \ No newline at end of file |
src/components/table/table-body.vue
@@ -6,7 +6,6 @@ | @@ -6,7 +6,6 @@ | ||
6 | <tbody :class="[prefixCls + '-tbody']"> | 6 | <tbody :class="[prefixCls + '-tbody']"> |
7 | <template v-for="(row, index) in data"> | 7 | <template v-for="(row, index) in data"> |
8 | <tr | 8 | <tr |
9 | - :key="row" | ||
10 | :class="rowClasses(row._index)" | 9 | :class="rowClasses(row._index)" |
11 | @mouseenter.stop="handleMouseIn(row._index)" | 10 | @mouseenter.stop="handleMouseIn(row._index)" |
12 | @mouseleave.stop="handleMouseOut(row._index)" | 11 | @mouseleave.stop="handleMouseOut(row._index)" |
@@ -17,6 +16,7 @@ | @@ -17,6 +16,7 @@ | ||
17 | :fixed="fixed" | 16 | :fixed="fixed" |
18 | :prefix-cls="prefixCls" | 17 | :prefix-cls="prefixCls" |
19 | :row="row" | 18 | :row="row" |
19 | + :key="row" | ||
20 | :column="column" | 20 | :column="column" |
21 | :natural-index="index" | 21 | :natural-index="index" |
22 | :index="row._index" | 22 | :index="row._index" |
@@ -28,7 +28,7 @@ | @@ -28,7 +28,7 @@ | ||
28 | </tr> | 28 | </tr> |
29 | <tr v-if="rowExpanded(row._index)"> | 29 | <tr v-if="rowExpanded(row._index)"> |
30 | <td :colspan="columns.length" :class="prefixCls + '-expanded-cell'"> | 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 | </td> | 32 | </td> |
33 | </tr> | 33 | </tr> |
34 | </template> | 34 | </template> |
src/components/tabs/tabs.vue
@@ -23,7 +23,7 @@ | @@ -23,7 +23,7 @@ | ||
23 | </template> | 23 | </template> |
24 | <script> | 24 | <script> |
25 | import Icon from '../icon/icon.vue'; | 25 | import Icon from '../icon/icon.vue'; |
26 | - import Render from '../base/render.vue'; | 26 | + import Render from '../base/render'; |
27 | import { oneOf, getStyle } from '../../utils/assist'; | 27 | import { oneOf, getStyle } from '../../utils/assist'; |
28 | import Emitter from '../../mixins/emitter'; | 28 | import Emitter from '../../mixins/emitter'; |
29 | 29 |