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 17:01:27 +08:00
parent a3547c1b41
commit 192e2cb849
2 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template> <template>
<div :class="classes" :style="styles"> <div :class="classes" :style="styles">
<div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div> <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header> <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle"> <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle">
<colgroup> <colgroup>
<col v-for="column in cloneColumns" :width="setCellWidth(column, $index)"> <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)">
@ -13,7 +13,7 @@
:columns="cloneColumns"></thead> :columns="cloneColumns"></thead>
</table> </table>
</div> </div>
<div :class="[prefixCls + '-body']" :style="bodyStyle"> <div :class="[prefixCls + '-body']" :style="bodyStyle" @scroll="handleBodyScroll">
<table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody> <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
<colgroup> <colgroup>
<col v-for="column in cloneColumns" :width="setCellWidth(column, $index)"> <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)">
@ -168,15 +168,17 @@
} }
this.$nextTick(() => { this.$nextTick(() => {
this.columnsWidth = []; this.columnsWidth = [];
let autoWidthIndex = -1 let autoWidthIndex = -1;
if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width); if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);
this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td').forEach((cell, index) => {
if (index === autoWidthIndex) { const $td = this.$els.tbody.querySelectorAll('tbody tr')[0].querySelectorAll('td');
this.columnsWidth.push(parseInt(getStyle(cell, 'width')) - 1); for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
if (i === autoWidthIndex) {
this.columnsWidth.push(parseInt(getStyle($td[i], 'width')) - 1);
} else { } else {
this.columnsWidth.push(parseInt(getStyle(cell, 'width'))); this.columnsWidth.push(parseInt(getStyle($td[i], 'width')));
} }
}); }
}); });
}); });
}, },
@ -269,6 +271,14 @@
this.rightFixedColumns = right; this.rightFixedColumns = right;
this.centerColumns = center; this.centerColumns = center;
this.cloneColumns = left.concat(center).concat(right); this.cloneColumns = left.concat(center).concat(right);
},
handleBodyScroll (event) {
this.$els.header.scrollLeft = event.target.scrollLeft;
// todo 固定时上下滚动，固定的表头也滚动 scrollTop
},
handleMouseWheel () {
console.log(111)
} }
}, },
compiled () { compiled () {

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

@ -58,16 +58,14 @@
border-bottom: none; border-bottom: none;
} }
&-header{
overflow: hidden;
}
&-body{ &-body{
//overflow-x: hidden;
//overflow-y: auto;
overflow: auto; overflow: auto;
position: relative; position: relative;
} }
&-with-fixed-top{
border-bottom: 1px solid @border-color-base;
}
&-with-fixed-top&-with-footer{ &-with-fixed-top&-with-footer{
.@{table-prefix-cls}-footer{ .@{table-prefix-cls}-footer{
border-top: 1px solid @border-color-base; border-top: 1px solid @border-color-base;