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 | 1 | <template> |
| 2 | 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 | 5 | </div> |
| 6 | 6 | </template> |
| 7 | 7 | <script> |
| 8 | + import abc from '../components/test.vue'; | |
| 8 | 9 | export default { |
| 10 | + components: { abc }, | |
| 9 | 11 | data () { |
| 10 | 12 | return { |
| 11 | - height: 200, | |
| 12 | - columns1: [ | |
| 13 | + self: this, | |
| 14 | + columns7: [ | |
| 13 | 15 | { |
| 14 | 16 | title: '姓名', |
| 15 | - key: 'name' | |
| 17 | + key: 'name', | |
| 18 | + render (row, column, index) { | |
| 19 | + return `<abc></abc>`; | |
| 20 | + } | |
| 16 | 21 | }, |
| 17 | 22 | { |
| 18 | 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 | 27 | title: '地址', |
| 44 | 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 | 42 | name: '王小明', |
| 70 | 43 | age: 18, |
| ... | ... | @@ -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 | 63 | }); |
| 64 | 64 | const res = Vue.compile(cell.outerHTML); |
| 65 | 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 | 73 | const component = new Vue({ |
| 67 | 74 | render: res.render, |
| 68 | 75 | staticRenderFns: res.staticRenderFns, |
| 69 | 76 | methods: methods, |
| 70 | 77 | data () { |
| 71 | 78 | return $parent._data; |
| 72 | - } | |
| 79 | + }, | |
| 80 | + components: components | |
| 73 | 81 | }); |
| 74 | 82 | component.row = this.row; |
| 75 | 83 | component.column = this.column; | ... | ... |