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

Merge pull request #3245 from huanghong1125/2.0

Browse source 
fixed table scollbar
This commit is contained in:
Aresn 2018-03-28 10:44:30 +08:00 • committed by GitHub
commit 46c73823e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 99 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
examples/routers/table.vue
View file

@ -5,10 +5,12 @@
<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>
<Table border :columns="columns7" height="240" :data="data7"></Table>
<br><br><br><br><br>
</div>
</template>
<script>
@ -103,19 +105,19 @@
}
]
},
// {
// title: 'Gender',
// key: 'gender',
// align: 'center',
// width: 200,
// fixed: 'right'
// },
{
title: 'Gender',
key: 'gender',
align: 'center',
width: 200,
fixed: 'right'
},
{
title: 'Gender',
key: 'gender',
align: 'center',
width: 200,
fixed: 'right'
//fixed: 'right'
}
],
columns2: [
@ -342,6 +344,55 @@
}
}
],
columns7: [
{
title: 'Date',
key: 'date',
sortable: true,
width:200,
},
{
title: 'Name',
key: 'name',
width:200,
},
{
title: 'Age',
key: 'age',
},
{
title: 'Address',
key: 'address',
width:200,
}
],
data7: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
],
}
},
mounted () {

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">

29
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 && rowIndex===0" :class='scrollBarCellClass()' :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;
},
@ -133,6 +131,23 @@
}
];
},
scrollBarCellClass(){
let hasRightFixed = false;
for(var i in this.headRows){
for(var j in this.headRows[i]){
if(this.headRows[i][j].fixed === 'right') {
hasRightFixed=true;
break;
}
if(hasRightFixed) break;
}
}
return [
{
[`${this.prefixCls}-hidden`]: hasRightFixed
}
];
},
itemClasses (column, item) {
return [
`${this.prefixCls}-filter-select-item`,

15
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;
@ -887,6 +896,10 @@
height () {
this.handleResize();
this.fixedHeader();
},
showHorizontalScrollBar () {
this.handleResize();
this.fixedHeader();
}
}
};

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

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