iview/src/components/table/table-body.vue

73 lines
2.6 KiB
Vue
Raw Normal View History

<template>
2016-11-26 08:57:09 +08:00
<table cellspacing="0" cellpadding="0" border="0" :style="style">
<colgroup>
<col v-for="column in columns" :width="setCellWidth(column, $index)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<tr
2016-11-28 14:23:49 +08:00
v-for="(index, row) in data"
2016-11-28 15:43:19 +08:00
:class="rowClasses(row._index)"
@mouseenter.stop="handleMouseIn(row._index)"
@mouseleave.stop="handleMouseOut(row._index)"
@click.stop="highlightCurrentRow(row._index)">
2016-11-26 08:57:09 +08:00
<td v-for="column in columns" :class="alignCls(column)">
<Cell
:fixed="fixed"
:prefix-cls="prefixCls"
:row="row"
:column="column"
2016-11-28 14:23:49 +08:00
:natural-index="index"
:index="row._index"
2016-11-28 15:43:19 +08:00
:checked="rowChecked(row._index)"></Cell>
2016-11-26 08:57:09 +08:00
</td>
</tr>
</tbody>
2016-11-25 22:51:50 +08:00
</table>
</template>
<script>
2016-11-26 08:57:09 +08:00
import Cell from './cell.vue';
import Mixin from './mixin';
export default {
2016-11-26 08:57:09 +08:00
mixins: [ Mixin ],
components: { Cell },
props: {
2016-11-26 08:57:09 +08:00
prefixCls: String,
style: Object,
columns: Array,
2016-11-28 14:23:49 +08:00
data: Array, // rebuildData
objData: Object,
2016-11-26 08:57:09 +08:00
fixed: Boolean
},
methods: {
2016-11-28 15:43:19 +08:00
rowClasses (_index) {
2016-11-27 01:42:39 +08:00
return [
`${this.prefixCls}-row`,
2016-11-28 14:23:49 +08:00
this.rowClsName(_index),
2016-11-27 01:42:39 +08:00
{
2016-11-29 16:05:14 +08:00
[`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
[`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover
2016-11-27 01:42:39 +08:00
}
]
},
2016-11-28 15:43:19 +08:00
rowChecked (_index) {
2016-11-29 16:05:14 +08:00
return this.objData[_index] && this.objData[_index]._isChecked;
2016-11-28 14:23:49 +08:00
},
2016-11-26 08:57:09 +08:00
setCellWidth (column, index) {
return this.$parent.setCellWidth(column, index);
},
2016-11-28 15:43:19 +08:00
rowClsName (_index) {
return this.$parent.rowClassName(this.objData[_index], _index);
2016-11-26 08:57:09 +08:00
},
2016-11-28 15:43:19 +08:00
handleMouseIn (_index) {
this.$parent.handleMouseIn(_index);
2016-11-26 08:57:09 +08:00
},
2016-11-28 15:43:19 +08:00
handleMouseOut (_index) {
this.$parent.handleMouseOut(_index);
2016-11-26 08:57:09 +08:00
},
2016-11-28 15:43:19 +08:00
highlightCurrentRow (_index) {
this.$parent.highlightCurrentRow(_index);
2016-11-26 08:57:09 +08:00
}
}
}
2016-11-29 18:42:34 +08:00
</script>