Commit 67ab89108c17604eca8cfb299d68744b9254cbc1
Merge remote-tracking branch 'upstream/2.0' into 2.0
Showing
3 changed files
with
47 additions
and
64 deletions
Show diff stats
examples/routers/table.vue
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div> |
3 | - <Table :height="height" border :columns="columns1" :data="data2"></Table> | ||
4 | - <Button @click="height=800">change height</Button> | 3 | + <Table border :context="self" :columns="columns7" :data="data6"></Table> |
4 | + <abc></abc> | ||
5 | </div> | 5 | </div> |
6 | </template> | 6 | </template> |
7 | <script> | 7 | <script> |
8 | + import abc from '../components/test.vue'; | ||
8 | export default { | 9 | export default { |
10 | + components: { abc }, | ||
9 | data () { | 11 | data () { |
10 | return { | 12 | return { |
11 | - height: 200, | ||
12 | - columns1: [ | 13 | + self: this, |
14 | + columns7: [ | ||
13 | { | 15 | { |
14 | title: '姓名', | 16 | title: '姓名', |
15 | - key: 'name' | 17 | + key: 'name', |
18 | + render (row, column, index) { | ||
19 | + return `<abc></abc>`; | ||
20 | + } | ||
16 | }, | 21 | }, |
17 | { | 22 | { |
18 | title: '年龄', | 23 | title: '年龄', |
19 | - key: 'age', | ||
20 | - filters:[ | ||
21 | - { | ||
22 | - label: '小学', | ||
23 | - value: '小学' | ||
24 | - }, | ||
25 | - { | ||
26 | - label: '中学', | ||
27 | - value: '大学' | ||
28 | - }, | ||
29 | - { | ||
30 | - label: '中学', | ||
31 | - value: '中学' | ||
32 | - } | ||
33 | - ], | ||
34 | - filterRemote:function(value,key,column){ | ||
35 | - var that = this; | ||
36 | - this.$Notice.open({title:`正在远程过滤${key}`,desc:value,duration:3,onClose:function(){ | ||
37 | - that.remoteFilter(value,key,column) | ||
38 | - }}) | ||
39 | - | ||
40 | - } | 24 | + key: 'age' |
41 | }, | 25 | }, |
42 | { | 26 | { |
43 | title: '地址', | 27 | title: '地址', |
44 | key: 'address' | 28 | key: 'address' |
45 | - } | ||
46 | - ], | ||
47 | - data2: [ | ||
48 | - { | ||
49 | - name: '王小明', | ||
50 | - age: 18, | ||
51 | - address: '北京市朝阳区芍药居' | ||
52 | }, | 29 | }, |
53 | { | 30 | { |
54 | - name: '张小刚', | ||
55 | - age: 25, | ||
56 | - address: '北京市海淀区西二旗' | ||
57 | - }, | ||
58 | - { | ||
59 | - name: '李小红', | ||
60 | - age: 30, | ||
61 | - address: '上海市浦东新区世纪大道' | ||
62 | - }, | ||
63 | - { | ||
64 | - name: '周小伟', | ||
65 | - age: 26, | ||
66 | - address: '深圳市南山区深南大道' | ||
67 | - }, | 31 | + title: '操作', |
32 | + key: 'action', | ||
33 | + width: 150, | ||
34 | + align: 'center', | ||
35 | + render (row, column, index) { | ||
36 | + return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`; | ||
37 | + } | ||
38 | + } | ||
39 | + ], | ||
40 | + data6: [ | ||
68 | { | 41 | { |
69 | name: '王小明', | 42 | name: '王小明', |
70 | age: 18, | 43 | age: 18, |
@@ -87,22 +60,16 @@ | @@ -87,22 +60,16 @@ | ||
87 | } | 60 | } |
88 | ] | 61 | ] |
89 | } | 62 | } |
90 | - | ||
91 | }, | 63 | }, |
92 | - methods:{ | ||
93 | - remoteFilter:function(val,age,column){ | ||
94 | - this.data1 = [ | ||
95 | - { | ||
96 | - name: '模拟1', | ||
97 | - age: 18, | ||
98 | - address: '北京市朝阳区芍药居' | ||
99 | - }, | ||
100 | - { | ||
101 | - name: '模拟2', | ||
102 | - age: 25, | ||
103 | - address: '北京市海淀区西二旗' | ||
104 | - }, | ||
105 | - ] | 64 | + methods: { |
65 | + show (index) { | ||
66 | + this.$Modal.info({ | ||
67 | + title: '用户信息', | ||
68 | + content: `姓名:${this.data6[index].name}<br>年龄:${this.data6[index].age}<br>地址:${this.data6[index].address}` | ||
69 | + }) | ||
70 | + }, | ||
71 | + remove (index) { | ||
72 | + this.data6.splice(index, 1); | ||
106 | } | 73 | } |
107 | } | 74 | } |
108 | } | 75 | } |
src/components/table/cell.vue
@@ -63,13 +63,21 @@ | @@ -63,13 +63,21 @@ | ||
63 | }); | 63 | }); |
64 | const res = Vue.compile(cell.outerHTML); | 64 | const res = Vue.compile(cell.outerHTML); |
65 | // todo 临时解决方案 | 65 | // todo 临时解决方案 |
66 | + | ||
67 | + // 获取父组件使用的局部 component | ||
68 | + const components = {}; | ||
69 | + Object.getOwnPropertyNames($parent.$options.components).forEach(item => { | ||
70 | + components[item] = $parent.$options.components[item]; | ||
71 | + }); | ||
72 | + | ||
66 | const component = new Vue({ | 73 | const component = new Vue({ |
67 | render: res.render, | 74 | render: res.render, |
68 | staticRenderFns: res.staticRenderFns, | 75 | staticRenderFns: res.staticRenderFns, |
69 | methods: methods, | 76 | methods: methods, |
70 | data () { | 77 | data () { |
71 | return $parent._data; | 78 | return $parent._data; |
72 | - } | 79 | + }, |
80 | + components: components | ||
73 | }); | 81 | }); |
74 | component.row = this.row; | 82 | component.row = this.row; |
75 | component.column = this.column; | 83 | component.column = this.column; |