95 lines
3.3 KiB
Vue
95 lines
3.3 KiB
Vue
<template>
|
|
<div :class="classes" ref="cell">
|
|
<template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
|
|
<template v-if="renderType === 'selection'">
|
|
<Checkbox :value="checked" @click.native.stop="handleClick" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
|
|
</template>
|
|
<template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template>
|
|
<template v-if="renderType === 'expand' && !row._disableExpand">
|
|
<div :class="expandCls" @click="toggleExpand">
|
|
<Icon type="ios-arrow-right"></Icon>
|
|
</div>
|
|
</template>
|
|
<Cell
|
|
v-if="renderType === 'render'"
|
|
:row="row"
|
|
:column="column"
|
|
:index="index"
|
|
:render="column.render"></Cell>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Cell from './expand';
|
|
import Icon from '../icon/icon.vue';
|
|
import Checkbox from '../checkbox/checkbox.vue';
|
|
|
|
export default {
|
|
name: 'TableCell',
|
|
components: { Icon, Checkbox, Cell },
|
|
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.$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: {
|
|
toggleSelect () {
|
|
this.$parent.$parent.$parent.toggleSelect(this.index);
|
|
},
|
|
toggleExpand () {
|
|
this.$parent.$parent.$parent.toggleExpand(this.index);
|
|
},
|
|
handleClick () {
|
|
// 放置 Checkbox 冒泡
|
|
}
|
|
},
|
|
created () {
|
|
if (this.column.type === 'index') {
|
|
this.renderType = 'index';
|
|
} else if (this.column.type === 'selection') {
|
|
this.renderType = 'selection';
|
|
} else if (this.column.type === 'expand') {
|
|
this.renderType = 'expand';
|
|
} else if (this.column.render) {
|
|
this.renderType = 'render';
|
|
} else {
|
|
this.renderType = 'normal';
|
|
}
|
|
}
|
|
};
|
|
</script>
|