drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Table support real Render function to render Cell

Browse source
This commit is contained in:
梁灏 2017-05-04 12:05:29 +08:00
parent 687c4562f1
commit 87b6ef9d8b
2 changed files with 75 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
examples/routers/table.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<Table border :context="self" :columns="columns7" :data="data6"></Table> <Table border :columns="columns7" :data="data6"></Table>
<abc></abc> <Button @click="handleAdd"> + 1</Button>
</div> </div>
</template> </template>
<script> <script>
@ -10,13 +10,23 @@
components: { abc }, components: { abc },
data () { data () {
return { return {
self: this, data1: 1,
// self: this,
columns7: [ columns7: [
{ {
title: '姓名', title: '姓名',
key: 'name', key: 'name',
render (row, column, index) { // render (row, column, index) {
return `<abc></abc>`; // return `<abc></abc>`;
// }
render: (h, row, column, index) => {
return h('div', [
h('Button',{
on: {
click: this.handleClick
}
}, 'hello')
])
} }
}, },
{ {
@ -61,6 +71,11 @@
] ]
} }
}, },
computed: {
ttt () {
return this.data1 + 1;
}
},
methods: { methods: {
show (index) { show (index) {
this.$Modal.info({ this.$Modal.info({
@ -70,6 +85,12 @@
}, },
remove (index) { remove (index) {
this.data6.splice(index, 1); this.data6.splice(index, 1);
},
handleAdd () {
this.data1++;
},
handleClick () {
this.$Message.info('111')
} }
} }
} }

81
src/components/table/cell.vue
View file

@ -48,42 +48,59 @@
methods: { methods: {
compile () { compile () {
if (this.column.render) { if (this.column.render) {
const $parent = this.context; // 兼容真 Render，后期废弃旧用法
const template = this.column.render(this.row, this.column, this.index); let isRealRender = false;
const cell = document.createElement('div'); try {
cell.innerHTML = template; this.column.render(this.row, this.column, this.index);
}
catch (err) {
isRealRender = true;
}
this.$el.innerHTML = ''; if (isRealRender) {
let methods = {}; const component = new Vue({
Object.keys($parent).forEach(key => { render: (h) => {
const func = $parent[key]; return this.column.render(h, this.row, this.column, this.index);
if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) { }
methods[key] = func; });
} const Cell = component.$mount();
}); this.$refs.cell.appendChild(Cell.$el);
const res = Vue.compile(cell.outerHTML); } else {
// todo 临时解决方案 const $parent = this.context;
const template = this.column.render(this.row, this.column, this.index);
const cell = document.createElement('div');
cell.innerHTML = template;
// 获取父组件使用的局部 component this.$el.innerHTML = '';
const components = {}; let methods = {};
Object.getOwnPropertyNames($parent.$options.components).forEach(item => { Object.keys($parent).forEach(key => {
components[item] = $parent.$options.components[item]; const func = $parent[key];
}); if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) {
methods[key] = func;
}
});
const res = Vue.compile(cell.outerHTML);
// 获取父组件使用的局部 component
const components = {};
Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
components[item] = $parent.$options.components[item];
});
const component = new Vue({ const component = new Vue({
render: res.render, render: res.render,
staticRenderFns: res.staticRenderFns, staticRenderFns: res.staticRenderFns,
methods: methods, methods: methods,
data () { data () {
return $parent._data; return $parent._data;
}, },
components: components components: components
}); });
component.row = this.row; component.row = this.row;
component.column = this.column; component.column = this.column;
const Cell = component.$mount(); const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el); this.$refs.cell.appendChild(Cell.$el);
}
} }
}, },
destroy () { destroy () {