Commit c0b2524da03637a5d552b804054824392facb888
1 parent
486d4fda
update Table cell render
update Table cell render
Showing
3 changed files
with
41 additions
and
42 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Table width="550" border :columns="columns2" :data="data3"></Table> | 2 | + <Table width="550" :content="self" border :columns="columns2" :data="data3"></Table> |
| 3 | </template> | 3 | </template> |
| 4 | <script> | 4 | <script> |
| 5 | export default { | 5 | export default { |
| 6 | + name: 'vvv', | ||
| 6 | data () { | 7 | data () { |
| 7 | return { | 8 | return { |
| 9 | + self: this, | ||
| 8 | columns2: [ | 10 | columns2: [ |
| 9 | { | 11 | { |
| 10 | title: '姓名', | 12 | title: '姓名', |
| @@ -43,7 +45,7 @@ | @@ -43,7 +45,7 @@ | ||
| 43 | fixed: 'right', | 45 | fixed: 'right', |
| 44 | width: 120, | 46 | width: 120, |
| 45 | render () { | 47 | render () { |
| 46 | - return `<Button type="text" size="small">查看</Button><Button type="text" size="small">编辑</Button>`; | 48 | + return `<i-button type="text" size="small" @click.native="handleClick">查看</i-button><i-button type="text" size="small">编辑</i-button>`; |
| 47 | } | 49 | } |
| 48 | } | 50 | } |
| 49 | ], | 51 | ], |
| @@ -56,32 +58,37 @@ | @@ -56,32 +58,37 @@ | ||
| 56 | city: '朝阳区', | 58 | city: '朝阳区', |
| 57 | zip: 100000 | 59 | zip: 100000 |
| 58 | }, | 60 | }, |
| 59 | - { | ||
| 60 | - name: '张小刚', | ||
| 61 | - age: 25, | ||
| 62 | - address: '北京市海淀区西二旗', | ||
| 63 | - province: '北京市', | ||
| 64 | - city: '海淀区', | ||
| 65 | - zip: 100000 | ||
| 66 | - }, | ||
| 67 | - { | ||
| 68 | - name: '李小红', | ||
| 69 | - age: 30, | ||
| 70 | - address: '上海市浦东新区世纪大道', | ||
| 71 | - province: '上海市', | ||
| 72 | - city: '浦东新区', | ||
| 73 | - zip: 100000 | ||
| 74 | - }, | ||
| 75 | - { | ||
| 76 | - name: '周小伟', | ||
| 77 | - age: 26, | ||
| 78 | - address: '深圳市南山区深南大道', | ||
| 79 | - province: '广东', | ||
| 80 | - city: '南山区', | ||
| 81 | - zip: 100000 | ||
| 82 | - } | 61 | +// { |
| 62 | +// name: '张小刚', | ||
| 63 | +// age: 25, | ||
| 64 | +// address: '北京市海淀区西二旗', | ||
| 65 | +// province: '北京市', | ||
| 66 | +// city: '海淀区', | ||
| 67 | +// zip: 100000 | ||
| 68 | +// }, | ||
| 69 | +// { | ||
| 70 | +// name: '李小红', | ||
| 71 | +// age: 30, | ||
| 72 | +// address: '上海市浦东新区世纪大道', | ||
| 73 | +// province: '上海市', | ||
| 74 | +// city: '浦东新区', | ||
| 75 | +// zip: 100000 | ||
| 76 | +// }, | ||
| 77 | +// { | ||
| 78 | +// name: '周小伟', | ||
| 79 | +// age: 26, | ||
| 80 | +// address: '深圳市南山区深南大道', | ||
| 81 | +// province: '广东', | ||
| 82 | +// city: '南山区', | ||
| 83 | +// zip: 100000 | ||
| 84 | +// } | ||
| 83 | ] | 85 | ] |
| 84 | } | 86 | } |
| 87 | + }, | ||
| 88 | + methods: { | ||
| 89 | + handleClick () { | ||
| 90 | + console.log(123) | ||
| 91 | + } | ||
| 85 | } | 92 | } |
| 86 | } | 93 | } |
| 87 | </script> | 94 | </script> |
src/components/table/cell.vue
| @@ -53,27 +53,19 @@ | @@ -53,27 +53,19 @@ | ||
| 53 | const cell = document.createElement('div'); | 53 | const cell = document.createElement('div'); |
| 54 | cell.innerHTML = template; | 54 | cell.innerHTML = template; |
| 55 | const _oldParentChildLen = $parent.$children.length; | 55 | const _oldParentChildLen = $parent.$children.length; |
| 56 | -// $parent.$compile(cell); // todo 这里无法触发 ready 钩子 | 56 | + // $parent.$compile(cell); // todo 这里无法触发 ready 钩子 |
| 57 | const _newParentChildLen = $parent.$children.length; | 57 | const _newParentChildLen = $parent.$children.length; |
| 58 | - | ||
| 59 | if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag | 58 | if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag |
| 60 | this.uid = $parent.$children[$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update | 59 | this.uid = $parent.$children[$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update |
| 61 | } | 60 | } |
| 62 | this.$el.innerHTML = ''; | 61 | this.$el.innerHTML = ''; |
| 63 | -// this.$el.appendChild(cell); | ||
| 64 | let methods = {}; | 62 | let methods = {}; |
| 65 | - let $_parent = this.$parent; | ||
| 66 | - while($_parent != null && $_parent._name != '<Table>'){ | ||
| 67 | - $_parent = $_parent.$parent; | ||
| 68 | - } | ||
| 69 | - if ($_parent) { | ||
| 70 | - Object.keys($_parent).forEach(key => { | ||
| 71 | - const func = this.$parent.$parent.$parent[`${key}`]; | ||
| 72 | - if(typeof(func) === 'function' &&func.name === 'boundFn'){ | ||
| 73 | - methods[`${key}`] = func; | ||
| 74 | - } | ||
| 75 | - }); | ||
| 76 | - } | 63 | + Object.keys($parent).forEach(key => { |
| 64 | + const func = this.$parent.$parent.$parent[`${key}`]; | ||
| 65 | + if(typeof(func) === 'function' &&func.name === 'boundFn'){ | ||
| 66 | + methods[`${key}`] = func; | ||
| 67 | + } | ||
| 68 | + }); | ||
| 77 | const res = Vue.compile(cell.outerHTML); | 69 | const res = Vue.compile(cell.outerHTML); |
| 78 | const compt = new Vue({ | 70 | const compt = new Vue({ |
| 79 | render: res.render, | 71 | render: res.render, |
src/index.js
| @@ -53,7 +53,7 @@ const iview = { | @@ -53,7 +53,7 @@ const iview = { | ||
| 53 | Badge, | 53 | Badge, |
| 54 | Breadcrumb, | 54 | Breadcrumb, |
| 55 | BreadcrumbItem: Breadcrumb.Item, | 55 | BreadcrumbItem: Breadcrumb.Item, |
| 56 | - // iButton: Button, | 56 | + iButton: Button, |
| 57 | Button, | 57 | Button, |
| 58 | ButtonGroup: Button.Group, | 58 | ButtonGroup: Button.Group, |
| 59 | Card, | 59 | Card, |