169 lines
6.4 KiB
Vue
169 lines
6.4 KiB
Vue
<template>
|
||
<div :class="classes" ref="cell">
|
||
<template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
|
||
<template v-if="renderType === 'selection'">
|
||
<Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
|
||
</template>
|
||
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
|
||
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
|
||
<template v-if="renderType === 'expand'">
|
||
<div :class="expandCls" @click="toggleExpand">
|
||
<Icon type="ios-arrow-right"></Icon>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import Vue from 'vue';
|
||
import Icon from '../icon/icon.vue';
|
||
import Checkbox from '../checkbox/checkbox.vue';
|
||
import { findComponentUpward } from '../../utils/assist';
|
||
|
||
export default {
|
||
name: 'TableCell',
|
||
components: { Icon, Checkbox },
|
||
props: {
|
||
prefixCls: String,
|
||
row: Object,
|
||
column: Object,
|
||
naturalIndex: Number, // index of rebuildData
|
||
index: Number, // _index of data
|
||
checked: Boolean,
|
||
disabled: Boolean,
|
||
expanded: Boolean,
|
||
fixed: {
|
||
type: [Boolean, String],
|
||
default: false
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
renderType: '',
|
||
uid: -1,
|
||
context: this.$parent.$parent.currentContext
|
||
};
|
||
},
|
||
computed: {
|
||
classes () {
|
||
return [
|
||
`${this.prefixCls}-cell`,
|
||
{
|
||
[`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
|
||
[`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
|
||
[`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
|
||
}
|
||
];
|
||
},
|
||
expandCls () {
|
||
return [
|
||
`${this.prefixCls}-cell-expand`,
|
||
{
|
||
[`${this.prefixCls}-cell-expand-expanded`]: this.expanded
|
||
}
|
||
];
|
||
}
|
||
},
|
||
methods: {
|
||
compile () {
|
||
if (this.column.render && this.renderType === 'render') {
|
||
// 兼容真 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);
|
||
},
|
||
toggleExpand () {
|
||
this.$parent.$parent.toggleExpand(this.index);
|
||
}
|
||
},
|
||
created () {
|
||
if (this.column.type === 'index') {
|
||
this.renderType = 'index';
|
||
} else if (this.column.type === 'selection') {
|
||
this.renderType = 'selection';
|
||
} else if (this.column.type === 'html') {
|
||
this.renderType = 'html';
|
||
} else if (this.column.type === 'expand') {
|
||
this.renderType = 'expand';
|
||
} else if (this.column.render) {
|
||
this.renderType = 'render';
|
||
} else {
|
||
this.renderType = 'normal';
|
||
}
|
||
},
|
||
mounted () {
|
||
this.$nextTick(() => {
|
||
this.compile();
|
||
});
|
||
},
|
||
beforeDestroy () {
|
||
this.destroy();
|
||
},
|
||
watch: {
|
||
naturalIndex () {
|
||
this.destroy();
|
||
this.compile();
|
||
}
|
||
}
|
||
};
|
||
</script>
|