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

Table support expand

Browse source
This commit is contained in:
Aresn 2017-05-27 15:13:10 +08:00
parent df64fd36bd
commit 08fd628d1f
8 changed files with 339 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,16 +5,22 @@
<Checkbox :value="checked" @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'">
<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: { Checkbox },
components: { Icon, Checkbox },
props: {
prefixCls: String,
row: Object,
@ -23,6 +29,7 @@
index: Number, // _index of data
checked: Boolean,
disabled: Boolean,
expanded: Boolean,
fixed: {
type: [Boolean, String],
default: false
@ -41,14 +48,23 @@
`${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-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) {
if (this.column.render && this.renderType === 'render') {
// 兼容真 Render，后期废弃旧用法
let isRealRender = true;
const Table = findComponentUpward(this, 'Table');
@ -114,6 +130,9 @@
},
toggleSelect () {
this.$parent.$parent.toggleSelect(this.index);
},
toggleExpand () {
this.$parent.$parent.toggleExpand(this.index);
}
},
created () {
@ -121,6 +140,8 @@
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 {