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

fixed #1195

Browse source 
fixed #1195 and abandon old Table render function
This commit is contained in:
Aresn 2017-06-30 16:26:31 +08:00
parent 4f5766117d
commit e40c5352a1
4 changed files with 45 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/routers/table.vue
View file

@ -11,6 +11,7 @@
{
type: 'expand',
render: (h) => {
console.log('______hover______');
return h(etable);
},
width: 50

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

@ -19,11 +19,9 @@
</div>
</template>
<script>
import Vue from 'vue';
import Cell from './expand';
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue';
import { findComponentUpward } from '../../utils/assist';
export default {
name: 'TableCell',
@ -46,7 +44,7 @@
return {
renderType: '',
uid: -1,
context: this.$parent.$parent.currentContext
context: this.$parent.$parent.$parent.currentContext
};
},
computed: {
@ -70,76 +68,11 @@
}
},
methods: {
compile () {
if (this.column.render && this.renderType === 'render') {
// todo 兼容真 Render，后期废弃旧用法
let isRealRender = true;
const Table = findComponentUpward(this, 'Table');
if (Table.context) isRealRender = false;
if (isRealRender) {
// this.$el.innerHTML = '';
// const component = new Vue({
// functional: true,
// render: (h) => {
// return this.column.render(h, {
// row: this.row,
// column: this.column,
// index: 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;
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
});
if ($parent.$store != undefined) {
component.$store = $parent.$store;
}
component.row = this.row;
component.column = this.column;
const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el);
}
}
},
destroy () {
},
toggleSelect () {
this.$parent.$parent.toggleSelect(this.index);
this.$parent.$parent.$parent.toggleSelect(this.index);
},
toggleExpand () {
this.$parent.$parent.toggleExpand(this.index);
this.$parent.$parent.$parent.toggleExpand(this.index);
}
},
created () {
@ -154,20 +87,6 @@
} else {
this.renderType = 'normal';
}
},
mounted () {
this.$nextTick(() => {
this.compile();
});
},
beforeDestroy () {
this.destroy();
},
watch: {
naturalIndex () {
this.destroy();
this.compile();
}
}
};
</script>

31
src/components/table/table-body.vue
View file

@ -5,12 +5,13 @@
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<template v-for="(row, index) in data">
<tr
:class="rowClasses(row._index)"
@mouseenter.stop="handleMouseIn(row._index)"
@mouseleave.stop="handleMouseOut(row._index)"
@click.stop="clickCurrentRow(row._index)"
@dblclick.stop="dblclickCurrentRow(row._index)">
<table-tr
:row="row"
:prefix-cls="prefixCls"
@mouseenter.native.stop="handleMouseIn(row._index)"
@mouseleave.native.stop="handleMouseOut(row._index)"
@click.native.stop="clickCurrentRow(row._index)"
@dblclick.native.stop="dblclickCurrentRow(row._index)">
<td v-for="column in columns" :class="alignCls(column, row)">
<Cell
:fixed="fixed"
@ -25,7 +26,7 @@
:expanded="rowExpanded(row._index)"
></Cell>
</td>
</tr>
</table-tr>
<tr v-if="rowExpanded(row._index)">
<td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
<Expand :key="row" :row="row" :render="expandRender" :index="row._index"></Expand>
@ -37,6 +38,7 @@
</template>
<script>
// todo :key="row"
import TableTr from './table-tr.vue';
import Cell from './cell.vue';
import Expand from './expand.js';
import Mixin from './mixin';
@ -44,7 +46,7 @@
export default {
name: 'TableBody',
mixins: [ Mixin ],
components: { Cell, Expand },
components: { Cell, Expand, TableTr },
props: {
prefixCls: String,
styleObject: Object,
@ -72,16 +74,6 @@
}
},
methods: {
rowClasses (_index) {
return [
`${this.prefixCls}-row`,
this.rowClsName(_index),
{
[`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
[`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
}
];
},
rowChecked (_index) {
return this.objData[_index] && this.objData[_index]._isChecked;
},
@ -91,9 +83,6 @@
rowExpanded(_index){
return this.objData[_index] && this.objData[_index]._isExpanded;
},
rowClsName (_index) {
return this.$parent.rowClassName(this.objData[_index], _index);
},
handleMouseIn (_index) {
this.$parent.handleMouseIn(_index);
},

31
src/components/table/table-tr.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<tr :class="rowClasses(row._index)"><slot></slot></tr>
</template>
<script>
export default {
props: {
row: Object,
prefixCls: String
},
computed: {
objData () {
return this.$parent.objData;
}
},
methods: {
rowClasses (_index) {
return [
`${this.prefixCls}-row`,
this.rowClsName(_index),
{
[`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
[`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
}
];
},
rowClsName (_index) {
return this.$parent.$parent.rowClassName(this.objData[_index], _index);
},
}
};
</script>