Commit 87b6ef9d8ba27daad950f8dcdaae36d45f6da8ec
1 parent
687c4562
Table support real Render function to render Cell
Showing
2 changed files
with
75 additions
and
37 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Table border :context="self" :columns="columns7" :data="data6"></Table> | ||
| 4 | - <abc></abc> | 3 | + <Table border :columns="columns7" :data="data6"></Table> |
| 4 | + <Button @click="handleAdd"> + 1</Button> | ||
| 5 | </div> | 5 | </div> |
| 6 | </template> | 6 | </template> |
| 7 | <script> | 7 | <script> |
| @@ -10,13 +10,23 @@ | @@ -10,13 +10,23 @@ | ||
| 10 | components: { abc }, | 10 | components: { abc }, |
| 11 | data () { | 11 | data () { |
| 12 | return { | 12 | return { |
| 13 | - self: this, | 13 | + data1: 1, |
| 14 | +// self: this, | ||
| 14 | columns7: [ | 15 | columns7: [ |
| 15 | { | 16 | { |
| 16 | title: '姓名', | 17 | title: '姓名', |
| 17 | key: 'name', | 18 | key: 'name', |
| 18 | - render (row, column, index) { | ||
| 19 | - return `<abc></abc>`; | 19 | +// render (row, column, index) { |
| 20 | +// return `<abc></abc>`; | ||
| 21 | +// } | ||
| 22 | + render: (h, row, column, index) => { | ||
| 23 | + return h('div', [ | ||
| 24 | + h('Button',{ | ||
| 25 | + on: { | ||
| 26 | + click: this.handleClick | ||
| 27 | + } | ||
| 28 | + }, 'hello') | ||
| 29 | + ]) | ||
| 20 | } | 30 | } |
| 21 | }, | 31 | }, |
| 22 | { | 32 | { |
| @@ -61,6 +71,11 @@ | @@ -61,6 +71,11 @@ | ||
| 61 | ] | 71 | ] |
| 62 | } | 72 | } |
| 63 | }, | 73 | }, |
| 74 | + computed: { | ||
| 75 | + ttt () { | ||
| 76 | + return this.data1 + 1; | ||
| 77 | + } | ||
| 78 | + }, | ||
| 64 | methods: { | 79 | methods: { |
| 65 | show (index) { | 80 | show (index) { |
| 66 | this.$Modal.info({ | 81 | this.$Modal.info({ |
| @@ -70,6 +85,12 @@ | @@ -70,6 +85,12 @@ | ||
| 70 | }, | 85 | }, |
| 71 | remove (index) { | 86 | remove (index) { |
| 72 | this.data6.splice(index, 1); | 87 | this.data6.splice(index, 1); |
| 88 | + }, | ||
| 89 | + handleAdd () { | ||
| 90 | + this.data1++; | ||
| 91 | + }, | ||
| 92 | + handleClick () { | ||
| 93 | + this.$Message.info('111') | ||
| 73 | } | 94 | } |
| 74 | } | 95 | } |
| 75 | } | 96 | } |
src/components/table/cell.vue
| @@ -48,42 +48,59 @@ | @@ -48,42 +48,59 @@ | ||
| 48 | methods: { | 48 | methods: { |
| 49 | compile () { | 49 | compile () { |
| 50 | if (this.column.render) { | 50 | if (this.column.render) { |
| 51 | - const $parent = this.context; | ||
| 52 | - const template = this.column.render(this.row, this.column, this.index); | ||
| 53 | - const cell = document.createElement('div'); | ||
| 54 | - cell.innerHTML = template; | 51 | + // 兼容真 Render，后期废弃旧用法 |
| 52 | + let isRealRender = false; | ||
| 53 | + try { | ||
| 54 | + this.column.render(this.row, this.column, this.index); | ||
| 55 | + } | ||
| 56 | + catch (err) { | ||
| 57 | + isRealRender = true; | ||
| 58 | + } | ||
| 55 | 59 | ||
| 56 | - this.$el.innerHTML = ''; | ||
| 57 | - let methods = {}; | ||
| 58 | - Object.keys($parent).forEach(key => { | ||
| 59 | - const func = $parent[key]; | ||
| 60 | - if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) { | ||
| 61 | - methods[key] = func; | ||
| 62 | - } | ||
| 63 | - }); | ||
| 64 | - const res = Vue.compile(cell.outerHTML); | ||
| 65 | - // todo 临时解决方案 | 60 | + if (isRealRender) { |
| 61 | + const component = new Vue({ | ||
| 62 | + render: (h) => { | ||
| 63 | + return this.column.render(h, this.row, this.column, this.index); | ||
| 64 | + } | ||
| 65 | + }); | ||
| 66 | + const Cell = component.$mount(); | ||
| 67 | + this.$refs.cell.appendChild(Cell.$el); | ||
| 68 | + } else { | ||
| 69 | + const $parent = this.context; | ||
| 70 | + const template = this.column.render(this.row, this.column, this.index); | ||
| 71 | + const cell = document.createElement('div'); | ||
| 72 | + cell.innerHTML = template; | ||
| 66 | 73 | ||
| 67 | - // 获取父组件使用的局部 component | ||
| 68 | - const components = {}; | ||
| 69 | - Object.getOwnPropertyNames($parent.$options.components).forEach(item => { | ||
| 70 | - components[item] = $parent.$options.components[item]; | ||
| 71 | - }); | 74 | + this.$el.innerHTML = ''; |
| 75 | + let methods = {}; | ||
| 76 | + Object.keys($parent).forEach(key => { | ||
| 77 | + const func = $parent[key]; | ||
| 78 | + if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) { | ||
| 79 | + methods[key] = func; | ||
| 80 | + } | ||
| 81 | + }); | ||
| 82 | + const res = Vue.compile(cell.outerHTML); | ||
| 83 | + // 获取父组件使用的局部 component | ||
| 84 | + const components = {}; | ||
| 85 | + Object.getOwnPropertyNames($parent.$options.components).forEach(item => { | ||
| 86 | + components[item] = $parent.$options.components[item]; | ||
| 87 | + }); | ||
| 72 | 88 | ||
| 73 | - const component = new Vue({ | ||
| 74 | - render: res.render, | ||
| 75 | - staticRenderFns: res.staticRenderFns, | ||
| 76 | - methods: methods, | ||
| 77 | - data () { | ||
| 78 | - return $parent._data; | ||
| 79 | - }, | ||
| 80 | - components: components | ||
| 81 | - }); | ||
| 82 | - component.row = this.row; | ||
| 83 | - component.column = this.column; | 89 | + const component = new Vue({ |
| 90 | + render: res.render, | ||
| 91 | + staticRenderFns: res.staticRenderFns, | ||
| 92 | + methods: methods, | ||
| 93 | + data () { | ||
| 94 | + return $parent._data; | ||
| 95 | + }, | ||
| 96 | + components: components | ||
| 97 | + }); | ||
| 98 | + component.row = this.row; | ||
| 99 | + component.column = this.column; | ||
| 84 | 100 | ||
| 85 | - const Cell = component.$mount(); | ||
| 86 | - this.$refs.cell.appendChild(Cell.$el); | 101 | + const Cell = component.$mount(); |
| 102 | + this.$refs.cell.appendChild(Cell.$el); | ||
| 103 | + } | ||
| 87 | } | 104 | } |
| 88 | }, | 105 | }, |
| 89 | destroy () { | 106 | destroy () { |