chenhaodong / mew-iview

Commit 4098c176e1bcbd87541b1a620e712e25d0a4c303

Authored by Aresn
1 parent 297f74ea

update Table

Showing 6 changed files with 73 additions and 94 deletions   Show diff stats
Inline Side-by-side
build/webpack.dev.config.js
  Show/Hide comments   View file @4098c17
... ... @@ -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
  Show/Hide comments   View file @4098c17
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
  Show/Hide comments   View file @4098c17
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/table/cell.vue
  Show/Hide comments   View file @4098c17
... ... @@ -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
  Show/Hide comments   View file @4098c17
... ... @@ -6,8 +6,17 @@ export default {
6 6 row: Object,
7 7 render: Function,
8 8 index: Number,
  9 + column: {
  10 + type: Object,
  11 + default: null
  12 + }
9 13 },
10 14 render: (h, ctx) => {
11   - return ctx.props.render(h, {row: ctx.props.row, index: ctx.props.index});
  15 + const params = {
  16 + row: ctx.props.row,
  17 + index: ctx.props.index
  18 + };
  19 + if (ctx.props.column) params.column = ctx.props.column;
  20 + return ctx.props.render(h, params);
12 21 }
13 22 };
14 23 \ No newline at end of file
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @4098c17
... ... @@ -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>
... ...