update Table
update Table
This commit is contained in:
parent
abdec99d22
commit
a3547c1b41
4 changed files with 149 additions and 66 deletions
68
src/components/table/cell.vue
Normal file
68
src/components/table/cell.vue
Normal file
|
@ -0,0 +1,68 @@
|
|||
<template>
|
||||
<div :class="[prefixCls + '-cell']">
|
||||
<template v-if="renderType === 'index'">{{index + 1}}</template>
|
||||
<template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
prefixCls: String,
|
||||
row: Object,
|
||||
column: Object,
|
||||
index: Number
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
renderType: '',
|
||||
uid: -1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
compile () {
|
||||
if (this.column.render) {
|
||||
const template = this.column.render(this.row, this.column, this.index);
|
||||
const cell = document.createElement('div');
|
||||
cell.innerHTML = template;
|
||||
const _oldParentChildLen = this.$parent.$parent.$children.length;
|
||||
this.$parent.$parent.$compile(cell);
|
||||
const _newParentChildLen = this.$parent.$parent.$children.length;
|
||||
|
||||
if (_oldParentChildLen !== _newParentChildLen) { // if render normal html node, do not tag
|
||||
this.uid = this.$parent.$parent.$children[this.$parent.$parent.$children.length - 1]._uid; // tag it, and delete when data or columns update
|
||||
}
|
||||
this.$el.innerHTML = '';
|
||||
this.$el.appendChild(cell);
|
||||
}
|
||||
},
|
||||
destroy () {
|
||||
for (let i = 0; i < this.$parent.$parent.$children.length; i++) {
|
||||
if (this.$parent.$parent.$children[i]._uid === this.uid) {
|
||||
this.$parent.$parent.$children[i].$destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
if (this.column.type === 'index') {
|
||||
this.renderType = 'index';
|
||||
} else if (this.column.render) {
|
||||
this.renderType = 'render';
|
||||
} else {
|
||||
this.renderType = 'normal';
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.compile();
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.destroy();
|
||||
},
|
||||
watch: {
|
||||
index () {
|
||||
this.destroy();
|
||||
this.compile();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue