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>
<div>
<Table border :context="self" :columns="columns7" :data="data6"></Table>
<abc></abc>
<Table border :columns="columns7" :data="data6"></Table>
<Button @click="handleAdd"> + 1</Button>
</div>
</template>
<script>
@ -10,13 +10,23 @@
components: { abc },
data () {
return {
self: this,
data1: 1,
// self: this,
columns7: [
{
title: '姓名',
key: 'name',
render (row, column, index) {
return `<abc></abc>`;
// render (row, column, index) {
// 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: {
show (index) {
this.$Modal.info({
@ -70,6 +85,12 @@
},
remove (index) {
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: {
compile () {
if (this.column.render) {
const $parent = this.context;
const template = this.column.render(this.row, this.column, this.index);
const cell = document.createElement('div');
cell.innerHTML = template;
// 兼容真 Render，后期废弃旧用法
let isRealRender = false;
try {
this.column.render(this.row, this.column, this.index);
}
catch (err) {
isRealRender = true;
}
this.$el.innerHTML = '';
let methods = {};
Object.keys($parent).forEach(key => {
const func = $parent[key];
if (typeof(func) === 'function' && (func.name === 'boundFn' || func.name === 'n')) {
methods[key] = func;
}
});
const res = Vue.compile(cell.outerHTML);
// todo 临时解决方案
if (isRealRender) {
const component = new Vue({
render: (h) => {
return this.column.render(h, this.row, this.column, this.index);
}
});
const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el);
} else {
const $parent = this.context;
const template = this.column.render(this.row, this.column, this.index);
const cell = document.createElement('div');
cell.innerHTML = template;
// 获取父组件使用的局部 component
const components = {};
Object.getOwnPropertyNames($parent.$options.components).forEach(item => {
components[item] = $parent.$options.components[item];
});
this.$el.innerHTML = '';
let methods = {};
Object.keys($parent).forEach(key => {
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({
render: res.render,
staticRenderFns: res.staticRenderFns,
methods: methods,
data () {
return $parent._data;
},
components: components
});
component.row = this.row;
component.column = this.column;
const component = new Vue({
render: res.render,
staticRenderFns: res.staticRenderFns,
methods: methods,
data () {
return $parent._data;
},
components: components
});
component.row = this.row;
component.column = this.column;
const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el);
const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el);
}
}
},
destroy () {