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

fixed table scollbar

Browse source
This commit is contained in:
huanghong 2018-03-27 22:26:56 +08:00
parent 6b90a39c12
commit eec3859c11
6 changed files with 19 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/routers/table.vue
View file

@ -5,7 +5,7 @@
<br><br><br><br><br>
<!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
<!--<br><br><br><br><br>-->
<Table border :columns="columns5" height="200" :data="data5"></Table>
<Table border :columns="columns5" height="240" :data="data5"></Table>
<br><br><br><br><br>
<Table border :columns="columns6" :data="data5"></Table>
<br><br><br><br><br>

26
src/components/table/mixin.js
View file

@ -17,37 +17,13 @@ export default {
isPopperShow (column) {
return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
},
setCellWidth (column, index, top) {
setCellWidth (column) {
let width = '';
if (column.width) {
width = column.width;
} else if (this.columnsWidth[column._index]) {
width = this.columnsWidth[column._index].width;
}
// when browser has scrollBar,set a width to resolve scroll position bug
if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0 && column.fixed!=='left' && !this.fixed) {
let scrollBarWidth = this.$parent.scrollBarWidth;
if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
width += scrollBarWidth;
}
// when fixed type,reset first right fixed column's width
if (this.fixed === 'right' && top ) {
//const firstFixedIndex = this.columns.lastIndexOf((col) => col.fixed === 'right');
let lastFixedIndex = -1;
for(let i=0;i<this.columns.length;i++){
if(this.columns[i].fixed==='right'){
lastFixedIndex = i;
}
else{
break;
}
}
if (lastFixedIndex === index) {
let scrollBarWidth = this.$parent.scrollBarWidth;
if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
width += scrollBarWidth;
}
}
if (width === '0') width = '';
return width;
}

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

@ -1,7 +1,7 @@
<template>
<table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
<colgroup>
<col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
<col v-for="(column, index) in columns" :width="setCellWidth(column)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<template v-for="(row, index) in data">

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

@ -1,7 +1,8 @@
<template>
<table cellspacing="0" cellpadding="0" border="0" :style="styles">
<colgroup>
<col v-for="(column, index) in columns" :width="setCellWidth(column, index, true)">
<col v-for="(column, index) in columns" :width="setCellWidth(column)">
<col v-if="$parent.showVerticalScrollBar" :width="$parent.scrollBarWidth"/>
</colgroup>
<thead>
<tr v-for="(cols, rowIndex) in headRows">
@ -59,6 +60,8 @@
</template>
</div>
</th>
<th v-if="$parent.showVerticalScrollBar" :rowspan="headRows.length"></th>
</tr>
</thead>
</table>
@ -93,12 +96,7 @@
computed: {
styles () {
const style = Object.assign({}, this.styleObject);
let scrollBarWidth = this.$parent.scrollBarWidth;
if(!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
let isLeftFixed = this.$el && this.$el.parentElement.className.indexOf('fixed-header')>0;
if(isLeftFixed) scrollBarWidth = 0;
const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
const width = parseInt(this.styleObject.width) ;
style.width = `${width}px`;
return style;
},

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

@ -5,7 +5,7 @@
<div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel">
<table-head
:prefix-cls="prefixCls"
:styleObject="tableStyle"
:styleObject="tableHeaderStyle"
:columns="cloneColumns"
:column-rows="columnRows"
:obj-data="objData"
@ -275,6 +275,15 @@
}
return style;
},
tableHeaderStyle () {
let style = {};
if (this.tableWidth !== 0) {
let width = '';
width = this.tableWidth;
style.width = `${width}px`;
}
return style;
},
fixedTableStyle () {
let style = {};
let width = 0;

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

@ -71,7 +71,7 @@
overflow: hidden;
}
&-body{
overflow: auto;
//overflow: auto;
//position: relative;
}