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

update Table

Browse source 
update Table
This commit is contained in:
梁灏 2016-11-25 22:51:50 +08:00
parent 192e2cb849
commit 3ef4dfb9ef
7 changed files with 68 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,16 +1,23 @@
<template>
<div :class="[prefixCls + '-cell']">
<div :class="classes">
<template v-if="renderType === 'index'">{{index + 1}}</template>
<template v-if="renderType === 'selection'">
<Checkbox :checked="checked" @on-change="toggleSelect(index)"></Checkbox>
</template>
<template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
</div>
</template>
<script>
import Checkbox from '../checkbox/checkbox.vue';
export default {
components: { Checkbox },
props: {
prefixCls: String,
row: Object,
column: Object,
index: Number
index: Number,
checked: Boolean
},
data () {
return {
@ -18,6 +25,16 @@
uid: -1
}
},
computed: {
classes () {
return [
`${this.prefixCls}-cell`,
{
[`${this.prefixCls}-hidden`]: this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right')
}
]
}
},
methods: {
compile () {
if (this.column.render) {
@ -41,11 +58,16 @@
this.$parent.$parent.$children[i].$destroy();
}
}
},
toggleSelect (index) {
this.$parent.toggleSelect(index);
}
},
compiled () {
if (this.column.type === 'index') {
this.renderType = 'index';
} else if (this.column.type === 'selection') {
this.renderType = 'selection';
} else if (this.column.render) {
this.renderType = 'render';
} else {

4
src/components/table/table-body.vue
View file

@ -1,5 +1,7 @@
<template>
<table cellspacing="0" cellpadding="0" border="0">
</table>
</template>
<script>
export default {

21
src/components/table/table-column.vue
View file

@ -1,21 +0,0 @@
<template>
</template>
<script>
export default {
props: {
},
data () {
return {
}
},
computed: {
},
methods: {
}
}
</script>

2
src/components/table/table-head.vue
View file

@ -2,7 +2,7 @@
<thead>
<tr>
<th v-for="column in columns" :class="alignCls(column)">
<div :class="[prefixCls + '-cell']">
<div :class="[prefixCls + '-cell', {[prefixCls + '-hidden']: column.fixed && (column.fixed === 'left' || column.fixed === 'right')}]">
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
<template v-else>{{{ renderHeader(column, $index) }}}</template>
</div>

45
src/components/table/table.vue
View file

@ -13,7 +13,7 @@
:columns="cloneColumns"></thead>
</table>
</div>
<div :class="[prefixCls + '-body']" :style="bodyStyle" @scroll="handleBodyScroll">
<div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
<colgroup>
<col v-for="column in cloneColumns" :width="setCellWidth(column, $index)">
@ -26,26 +26,28 @@
@mouseleave.stop="handleMouseOut(index)"
@click.stop="highlightCurrentRow(index)">
<td v-for="column in cloneColumns" :class="alignCls(column)">
<div :class="[prefixCls + '-cell']" v-if="column.type === 'selection'">
<Checkbox :checked="cloneData[index] && cloneData[index]._isChecked" @on-change="toggleSelect(index)"></Checkbox>
</div>
<Cell v-else :prefix-cls="prefixCls" :row="row" :column="column" :index="index"></Cell>
<!--<div :class="[prefixCls + '-cell']" v-else>-->
<!--{{{ renderRow(row, column, index) }}}-->
<!--</div>-->
<!--<div :class="[prefixCls + '-cell']">-->
<!--<template v-if="column.type === 'selection'">-->
<!--<Checkbox :checked="cloneData[index] && cloneData[index]._isChecked" @on-change="toggleSelect(index)"></Checkbox>-->
<!--</template>-->
<!--<template v-else>{{{ renderRow(row, column, index) }}}</template>-->
<!--</div>-->
<Cell
:prefix-cls="prefixCls"
:row="row"
:column="column"
:index="index"
:checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
</td>
</tr>
</tbody>
</table>
</div>
<div :class="[prefixCls + '-fixed']">
<table cellspacing="0" cellpadding="0" border="0">
<colgroup>
<col v-for="column in leftFixedColumns" :width="setCellWidth(column, $index)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<tr>
</tr>
</tbody>
</table>
</div>
<div :class="[prefixCls + '-fixed-right']">
@ -82,6 +84,9 @@
return oneOf(value, ['small', 'large']);
}
},
width: {
type: [Number, String]
},
height: {
type: [Number, String]
},
@ -141,6 +146,7 @@
styles () {
let style = {};
if (!!this.height) style.height = `${this.height}px`;
if (!!this.width) style.width = `${this.width}px`;
return style;
},
tableStyle () {
@ -277,8 +283,15 @@
// todo 固定时上下滚动，固定的表头也滚动 scrollTop
},
handleMouseWheel () {
console.log(111)
handleMouseWheel (event) {
const deltaX = event.deltaX;
const $body = this.$els.body;
if (deltaX > 0) {
$body.scrollLeft = $body.scrollLeft + 10;
} else {
$body.scrollLeft = $body.scrollLeft - 10;
}
}
},
compiled () {

5
src/styles/components/table.less
View file

@ -10,7 +10,7 @@
border: 1px solid @border-color-base;
border-bottom: 0;
border-right: 0;
border-collapse: collapse;
//border-collapse: collapse;
box-sizing: border-box;
position: relative;
@ -130,6 +130,9 @@
word-break: break-all;
box-sizing: border-box;
}
&-hidden{
visibility: hidden;
}
th &-cell{
display: inline-block;
position: relative;

11
test/routers/table.vue
View file

@ -8,9 +8,8 @@
<!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
<br>
<i-table
style="width:450px"
width="450"
border
highlight-row
:columns="columns"
:data="data"
:row-class-name="rowClsName"
@ -37,6 +36,10 @@
type: 'selection',
width: 50
},
{
type: 'index',
width: 50
},
{
title: '姓名',
key: 'name',
@ -48,7 +51,7 @@
title: '年龄',
key: 'age',
align: 'right',
fixed: 'left',
// fixed: 'left',
width: 100
// render (row) {
// return `<i-button>${row.age}</i-button>`
@ -151,7 +154,7 @@
// address: '北京市东城区2',
// edit: false
// });
this.data.splice(1, 1)
// this.data.splice(1, 1)
}, 1000);
}
}