Commit 6b23d43ba5f373a6228bc44ed07054cf23015cca

Authored by Lawrence Lee
2 parents 349548d4 e9287a6b

Merge branch 'iview-2.0' into 2.0

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.js 0 → 100644
  1 +export default {
  2 + name: 'RenderCell',
  3 + functional: true,
  4 + props: {
  5 + render: Function
  6 + },
  7 + render: (h, ctx) => {
  8 + return ctx.props.render(h);
  9 + }
  10 +};
0 \ No newline at end of file 11 \ No newline at end of file
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