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

fixed safari scroll bar

Browse source
This commit is contained in:
huanghong 2018-04-09 20:09:39 +08:00
parent b1262a3d8d
commit 9d304dd635
3 changed files with 129 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
build/webpack.dev.config.js
View file

@ -41,5 +41,8 @@ module.exports = merge(webpackBaseConfig, {
template: path.join(__dirname, '../examples/index.html') template: path.join(__dirname, '../examples/index.html')
}), }),
new FriendlyErrorsPlugin() new FriendlyErrorsPlugin()
] ],
devServer:{
host: '0.0.0.0'
}
}); });

7
examples/routers/table.vue
View file

@ -2,7 +2,7 @@
<div> <div>
<br><br><br><br><br> <br><br><br><br><br>
<Table border :columns="columns1" height="500" :data="data1"></Table> <Table border :columns="columns1" height="500" :data="data1"></Table>
<Table border :columns="columns1" height='300'></Table> <!-- <Table border :columns="columns1" height='300'></Table> -->
<!-- <br><br><br><br><br> --> <!-- <br><br><br><br><br> -->
<!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> --> <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
<!--<br><br><br><br><br>--> <!--<br><br><br><br><br>-->
@ -12,8 +12,8 @@
<!-- <br><br><br><br><br> --> <!-- <br><br><br><br><br> -->
<Table border :columns="columns7" height="240" :data="data7"></Table> <Table border :columns="columns7" height="240" :data="data7"></Table>
<!-- <br><br><br><br><br> --> <!-- <br><br><br><br><br> -->
<Table border :columns="columns8" :data="data7" height="200"></Table> <!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
<Table border :columns="columns8" height="200"></Table> <!-- <Table border :columns="columns8" height="200"></Table> -->
<br><br><br><br><br> <br><br><br><br><br>
</div> </div>
</template> </template>
@ -372,6 +372,7 @@
{ {
title: 'Age', title: 'Age',
key: 'age', key: 'age',
width:200,
}, },
{ {
title: 'Address', title: 'Address',

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

@ -187,6 +187,8 @@
objData: this.makeObjData(), // checkbox or highlight-row objData: this.makeObjData(), // checkbox or highlight-row
rebuildData: [], // for sort or filter rebuildData: [], // for sort or filter
cloneColumns: this.makeColumns(), cloneColumns: this.makeColumns(),
minWidthColumns:[],
maxWidthColumns:[],
columnRows: this.makeColumnRows(false), columnRows: this.makeColumnRows(false),
leftFixedColumnRows: this.makeColumnRows('left'), leftFixedColumnRows: this.makeColumnRows('left'),
rightFixedColumnRows: this.makeColumnRows('right'), rightFixedColumnRows: this.makeColumnRows('right'),
@ -194,7 +196,6 @@
showSlotHeader: true, showSlotHeader: true,
showSlotFooter: true, showSlotFooter: true,
bodyHeight: 0, bodyHeight: 0,
bodyRealHeight: 0,
scrollBarWidth: getScrollBarSize(), scrollBarWidth: getScrollBarSize(),
currentContext: this.context, currentContext: this.context,
cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
@ -264,11 +265,7 @@
if (this.bodyHeight === 0) { if (this.bodyHeight === 0) {
width = this.tableWidth; width = this.tableWidth;
} else { } else {
if (this.bodyHeight > this.bodyRealHeight) { width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
width = this.tableWidth;
} else {
width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
}
} }
// const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth; // const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
style.width = `${width}px`; style.width = `${width}px`;
@ -349,109 +346,118 @@
return this.rowClassName(this.data[index], index); return this.rowClassName(this.data[index], index);
}, },
handleResize () { handleResize () {
this.$nextTick(() => { //let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
const allWidth = !this.allColumns.some(cell => !cell.width); // each column set a width let tableWidth = this.$el.offsetWidth - 1;
if (allWidth) { let columnsWidth = {};
this.tableWidth = this.allColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
} else {
this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
}
this.columnsWidth = {};
this.$nextTick(() => {
let columnsWidth = {};
let hasWidthColumns = []; let hasWidthColumns = [];
let noWidthColumns = []; let noWidthColumns = [];
let minWidthColumns = []; let minWidthColumns = this.minWidthColumns;
let maxWidthColumns = []; let maxWidthColumns = this.maxWidthColumns;
this.cloneColumns.forEach((col) => { this.cloneColumns.forEach((col) => {
if (col.width) { if (col.width) {
hasWidthColumns.push(col); hasWidthColumns.push(col);
}
else{
noWidthColumns.push(col);
}
col._width = null;
});
let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
let usableLength = noWidthColumns.length;
let columnWidth = 0;
if(usableWidth > 0 && usableLength > 0){
columnWidth = parseInt(usableWidth / usableLength);
}
for (let i = 0; i < maxWidthColumns.length; i++) {
if(columnWidth > maxWidthColumns[i].maxWidth){
maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth;
usableWidth -= maxWidthColumns[i].maxWidth;
usableLength--;
if (usableWidth>0) {
if (usableLength === 0) {
columnWidth = 0;
}
else {
columnWidth = parseInt(usableWidth / usableLength);
}
} }
else{ else{
noWidthColumns.push(col); columnWidth = 0;
if(col.minWidth){
minWidthColumns.push(col);
}
if(col.maxWidth){
maxWidthColumns.push(col);
}
}
col._width = null;
});
minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
maxWidthColumns.sort((a,b)=>a.maxWidth < b.maxWidth);
let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
let usableWidth = this.tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
let usableLength = noWidthColumns.length;
let columnWidth = parseInt(usableWidth / usableLength);
for (let i = 0; i < maxWidthColumns.length; i++) {
if(columnWidth > maxWidthColumns[i].maxWidth){
maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth;
usableWidth -= maxWidthColumns[i].maxWidth;
usableLength--;
columnWidth = parseInt(usableWidth / usableLength);
} }
} }
}
for (let i = 0; i < minWidthColumns.length; i++) { for (let i = 0; i < minWidthColumns.length; i++) {
if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){ if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){
if(!minWidthColumns[i]._width){
minWidthColumns[i]._width = minWidthColumns[i].minWidth; minWidthColumns[i]._width = minWidthColumns[i].minWidth;
usableWidth -= minWidthColumns[i].minWidth; usableWidth -= minWidthColumns[i].minWidth;
usableLength--; usableLength--;
columnWidth = parseInt(usableWidth / usableLength); if (usableWidth>0) {
} if (usableLength === 0) {
} columnWidth = 0;
}
if (usableLength===0){ else {
columnWidth = 0; columnWidth = parseInt(usableWidth / usableLength);
} }
for (let i = 0; i < this.cloneColumns.length; i++) {
const column = this.cloneColumns[i];
let width = columnWidth;
if(column.width){
width = column.width;
}
else{
if(column._width){
width = column._width;
}
else if (column.minWidth > width){
width = column.minWidth;
}
else if (column.maxWidth < width){
width = column.maxWidth;
} }
else{ else{
columnWidth = 0;
}
}
}
}
for (let i = 0; i < this.cloneColumns.length; i++) {
const column = this.cloneColumns[i];
let width = columnWidth;
if(column.width){
width = column.width;
}
else{
if (column._width) {
width = column._width;
}
else if (column.minWidth > width){
width = column.minWidth;
}
else if (column.maxWidth < width){
width = column.maxWidth;
}
else {
if (usableWidth>0) {
if (usableLength > 1) { if (usableLength > 1) {
usableLength--; usableLength--;
usableWidth -= width; usableWidth -= width;
columnWidth = parseInt(usableWidth / usableLength); columnWidth = parseInt(usableWidth / usableLength);
} }
else {
columnWidth = 0;
}
}
else{
columnWidth = 0;
} }
} }
this.cloneColumns[i]._width = width;
columnsWidth[column._index] = {
width: width
};
} }
//this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
this.columnsWidth = columnsWidth; this.cloneColumns[i]._width = width;
this.$nextTick(()=>{
this.fixedHeader(); columnsWidth[column._index] = {
width: width
}); };
});
// get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth }
this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height')); //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
}); this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
this.columnsWidth = columnsWidth;
this.fixedHeader();
}, },
handleMouseIn (_index) { handleMouseIn (_index) {
if (this.disabledHover) return; if (this.disabledHover) return;
@ -567,9 +573,9 @@
} }
}, },
fixedBody (){ fixedBody (){
this.headerWidth = this.$refs.header.childNodes[0].offsetWidth; this.headerWidth = this.$refs.header.children[0].offsetWidth;
this.headerHeight = this.$refs.header.childNodes[0].offsetHeight; this.headerHeight = this.$refs.header.children[0].offsetHeight;
this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.parentElement.offsetWidth; this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
if (!this.$refs.tbody || !this.data || this.data.length === 0) { if (!this.$refs.tbody || !this.data || this.data.length === 0) {
this.showVerticalScrollBar = false; this.showVerticalScrollBar = false;
} }
@ -592,7 +598,6 @@
bodyEl.classList.remove(this.prefixCls +'-overflowX'); bodyEl.classList.remove(this.prefixCls +'-overflowX');
} }
} }
this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
}, },
hideColumnFilter () { hideColumnFilter () {
@ -859,6 +864,25 @@
makeColumnRows (fixedType) { makeColumnRows (fixedType) {
return convertToRows(this.columns, fixedType); return convertToRows(this.columns, fixedType);
}, },
setMinMaxColumnRows (){
let minWidthColumns=[];
let maxWidthColumns=[];
this.cloneColumns.forEach((col) => {
if (!col.width) {
if(col.minWidth){
minWidthColumns.push(col);
}
if(col.maxWidth){
maxWidthColumns.push(col);
}
}
});
minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
maxWidthColumns.sort((a,b)=>a.maxWidth < b.maxWidth);
this.minWidthColumns = minWidthColumns;
this.maxWidthColumns = maxWidthColumns;
},
exportCsv (params) { exportCsv (params) {
if (params.filename) { if (params.filename) {
if (params.filename.indexOf('.csv') === -1) { if (params.filename.indexOf('.csv') === -1) {
@ -895,6 +919,7 @@
}, },
mounted () { mounted () {
this.handleResize(); this.handleResize();
this.setMinMaxColumnRows();
this.$nextTick(() => this.ready = true); this.$nextTick(() => this.ready = true);
on(window, 'resize', this.handleResize); on(window, 'resize', this.handleResize);
@ -933,6 +958,8 @@
// todo 这里有性能问题，可能是左右固定计算属性影响的 // todo 这里有性能问题，可能是左右固定计算属性影响的
this.allColumns = getAllColumns(this.columns); this.allColumns = getAllColumns(this.columns);
this.cloneColumns = this.makeColumns(); this.cloneColumns = this.makeColumns();
this.setMinMaxColumnRows();
this.columnRows = this.makeColumnRows(false); this.columnRows = this.makeColumnRows(false);
this.leftFixedColumnRows = this.makeColumnRows('left'); this.leftFixedColumnRows = this.makeColumnRows('left');
this.rightFixedColumnRows = this.makeColumnRows('right'); this.rightFixedColumnRows = this.makeColumnRows('right');