other / mew-iview

Commit 9d304dd63574fb8d0036aa3e6cdafa409e7301ba

Authored by huanghong
1 parent b1262a3d

fixed safari scroll bar

Showing 3 changed files with 123 additions and 92 deletions   Show diff stats
Inline Side-by-side
build/webpack.dev.config.js
  Show/Hide comments   View file @9d304dd
@@ -41,5 +41,8 @@ module.exports = merge(webpackBaseConfig, { @@ -41,5 +41,8 @@ module.exports = merge(webpackBaseConfig, {
41 template: path.join(__dirname, '../examples/index.html') 41 template: path.join(__dirname, '../examples/index.html')
42 }), 42 }),
43 new FriendlyErrorsPlugin() 43 new FriendlyErrorsPlugin()
44 - ] 44 + ],
  45 + devServer:{
  46 + host: '0.0.0.0'
  47 + }
45 }); 48 });
examples/routers/table.vue
  Show/Hide comments   View file @9d304dd
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <div> 2 <div>
3 <br><br><br><br><br> 3 <br><br><br><br><br>
4 <Table border :columns="columns1" height="500" :data="data1"></Table> 4 <Table border :columns="columns1" height="500" :data="data1"></Table>
5 - <Table border :columns="columns1" height='300'></Table> 5 + <!-- <Table border :columns="columns1" height='300'></Table> -->
6 <!-- <br><br><br><br><br> --> 6 <!-- <br><br><br><br><br> -->
7 <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> --> 7 <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
8 <!--<br><br><br><br><br>--> 8 <!--<br><br><br><br><br>-->
@@ -12,8 +12,8 @@ @@ -12,8 +12,8 @@
12 <!-- <br><br><br><br><br> --> 12 <!-- <br><br><br><br><br> -->
13 <Table border :columns="columns7" height="240" :data="data7"></Table> 13 <Table border :columns="columns7" height="240" :data="data7"></Table>
14 <!-- <br><br><br><br><br> --> 14 <!-- <br><br><br><br><br> -->
15 - <Table border :columns="columns8" :data="data7" height="200"></Table>  
16 - <Table border :columns="columns8" height="200"></Table> 15 + <!-- <Table border :columns="columns8" :data="data7" height="200"></Table> -->
  16 + <!-- <Table border :columns="columns8" height="200"></Table> -->
17 <br><br><br><br><br> 17 <br><br><br><br><br>
18 </div> 18 </div>
19 </template> 19 </template>
@@ -372,6 +372,7 @@ @@ -372,6 +372,7 @@
372 { 372 {
373 title: 'Age', 373 title: 'Age',
374 key: 'age', 374 key: 'age',
  375 + width:200,
375 }, 376 },
376 { 377 {
377 title: 'Address', 378 title: 'Address',
src/components/table/table.vue
  Show/Hide comments   View file @9d304dd
@@ -187,6 +187,8 @@ @@ -187,6 +187,8 @@
187 objData: this.makeObjData(), // checkbox or highlight-row 187 objData: this.makeObjData(), // checkbox or highlight-row
188 rebuildData: [], // for sort or filter 188 rebuildData: [], // for sort or filter
189 cloneColumns: this.makeColumns(), 189 cloneColumns: this.makeColumns(),
  190 + minWidthColumns:[],
  191 + maxWidthColumns:[],
190 columnRows: this.makeColumnRows(false), 192 columnRows: this.makeColumnRows(false),
191 leftFixedColumnRows: this.makeColumnRows('left'), 193 leftFixedColumnRows: this.makeColumnRows('left'),
192 rightFixedColumnRows: this.makeColumnRows('right'), 194 rightFixedColumnRows: this.makeColumnRows('right'),
@@ -194,7 +196,6 @@ @@ -194,7 +196,6 @@
194 showSlotHeader: true, 196 showSlotHeader: true,
195 showSlotFooter: true, 197 showSlotFooter: true,
196 bodyHeight: 0, 198 bodyHeight: 0,
197 - bodyRealHeight: 0,  
198 scrollBarWidth: getScrollBarSize(), 199 scrollBarWidth: getScrollBarSize(),
199 currentContext: this.context, 200 currentContext: this.context,
200 cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data 201 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 @@ @@ -264,11 +265,7 @@
264 if (this.bodyHeight === 0) { 265 if (this.bodyHeight === 0) {
265 width = this.tableWidth; 266 width = this.tableWidth;
266 } else { 267 } else {
267 - if (this.bodyHeight > this.bodyRealHeight) {  
268 - width = this.tableWidth;  
269 - } else {  
270 - width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);  
271 - } 268 + width = this.tableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
272 } 269 }
273 // const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth; 270 // const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
274 style.width = `${width}px`; 271 style.width = `${width}px`;
@@ -349,109 +346,118 @@ @@ -349,109 +346,118 @@
349 return this.rowClassName(this.data[index], index); 346 return this.rowClassName(this.data[index], index);
350 }, 347 },
351 handleResize () { 348 handleResize () {
352 - this.$nextTick(() => {  
353 - const allWidth = !this.allColumns.some(cell => !cell.width); // each column set a width  
354 - if (allWidth) {  
355 - this.tableWidth = this.allColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);  
356 - } else {  
357 - this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; 349 + //let tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
  350 + let tableWidth = this.$el.offsetWidth - 1;
  351 + let columnsWidth = {};
  352 +
  353 + let hasWidthColumns = [];
  354 + let noWidthColumns = [];
  355 + let minWidthColumns = this.minWidthColumns;
  356 + let maxWidthColumns = this.maxWidthColumns;
  357 + this.cloneColumns.forEach((col) => {
  358 + if (col.width) {
  359 + hasWidthColumns.push(col);
  360 + }
  361 + else{
  362 + noWidthColumns.push(col);
  363 + }
  364 + col._width = null;
  365 + });
  366 +
  367 +
  368 + let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);
  369 + let usableWidth = tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);
  370 + let usableLength = noWidthColumns.length;
  371 + let columnWidth = 0;
  372 + if(usableWidth > 0 && usableLength > 0){
  373 + columnWidth = parseInt(usableWidth / usableLength);
358 } 374 }
359 - this.columnsWidth = {};  
360 - this.$nextTick(() => {  
361 - let columnsWidth = {};  
362 -  
363 - let hasWidthColumns = [];  
364 - let noWidthColumns = [];  
365 - let minWidthColumns = [];  
366 - let maxWidthColumns = [];  
367 - this.cloneColumns.forEach((col) => {  
368 - if (col.width) {  
369 - hasWidthColumns.push(col);  
370 - }  
371 - else{  
372 - noWidthColumns.push(col);  
373 - if(col.minWidth){  
374 - minWidthColumns.push(col); 375 + for (let i = 0; i < maxWidthColumns.length; i++) {
  376 + if(columnWidth > maxWidthColumns[i].maxWidth){
  377 + maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth;
  378 + usableWidth -= maxWidthColumns[i].maxWidth;
  379 + usableLength--;
  380 + if (usableWidth>0) {
  381 + if (usableLength === 0) {
  382 + columnWidth = 0;
375 } 383 }
376 - if(col.maxWidth){  
377 - maxWidthColumns.push(col); 384 + else {
  385 + columnWidth = parseInt(usableWidth / usableLength);
378 } 386 }
379 } 387 }
380 - col._width = null;  
381 - });  
382 -  
383 - minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);  
384 - maxWidthColumns.sort((a,b)=>a.maxWidth < b.maxWidth);  
385 -  
386 - let unUsableWidth = hasWidthColumns.map(cell => cell.width).reduce((a, b) => a + b, 0);  
387 - let usableWidth = this.tableWidth - unUsableWidth - (this.showVerticalScrollBar?this.scrollBarWidth:0);  
388 - let usableLength = noWidthColumns.length;  
389 - let columnWidth = parseInt(usableWidth / usableLength);  
390 -  
391 - for (let i = 0; i < maxWidthColumns.length; i++) {  
392 - if(columnWidth > maxWidthColumns[i].maxWidth){  
393 - maxWidthColumns[i]._width = maxWidthColumns[i].maxWidth;  
394 - usableWidth -= maxWidthColumns[i].maxWidth;  
395 - usableLength--;  
396 - columnWidth = parseInt(usableWidth / usableLength); 388 + else{
  389 + columnWidth = 0;
397 } 390 }
398 } 391 }
  392 + }
399 393
400 - for (let i = 0; i < minWidthColumns.length; i++) {  
401 - if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){ 394 + for (let i = 0; i < minWidthColumns.length; i++) {
  395 + if(columnWidth < minWidthColumns[i].minWidth && !minWidthColumns[i].width){
  396 + if(!minWidthColumns[i]._width){
402 minWidthColumns[i]._width = minWidthColumns[i].minWidth; 397 minWidthColumns[i]._width = minWidthColumns[i].minWidth;
403 usableWidth -= minWidthColumns[i].minWidth; 398 usableWidth -= minWidthColumns[i].minWidth;
404 usableLength--; 399 usableLength--;
405 - columnWidth = parseInt(usableWidth / usableLength); 400 + if (usableWidth>0) {
  401 + if (usableLength === 0) {
  402 + columnWidth = 0;
  403 + }
  404 + else {
  405 + columnWidth = parseInt(usableWidth / usableLength);
  406 + }
  407 + }
  408 + else{
  409 + columnWidth = 0;
  410 + }
406 } 411 }
  412 +
407 } 413 }
  414 + }
408 415
409 - if (usableLength===0){  
410 - columnWidth = 0; 416 +
  417 + for (let i = 0; i < this.cloneColumns.length; i++) {
  418 + const column = this.cloneColumns[i];
  419 + let width = columnWidth;
  420 + if(column.width){
  421 + width = column.width;
411 } 422 }
412 -  
413 - for (let i = 0; i < this.cloneColumns.length; i++) {  
414 - const column = this.cloneColumns[i];  
415 - let width = columnWidth;  
416 - if(column.width){  
417 - width = column.width; 423 + else{
  424 + if (column._width) {
  425 + width = column._width;
418 } 426 }
419 - else{  
420 - if(column._width){  
421 - width = column._width;  
422 - }  
423 - else if (column.minWidth > width){  
424 - width = column.minWidth;  
425 - }  
426 - else if (column.maxWidth < width){  
427 - width = column.maxWidth;  
428 - }  
429 - else{ 427 + else if (column.minWidth > width){
  428 + width = column.minWidth;
  429 + }
  430 + else if (column.maxWidth < width){
  431 + width = column.maxWidth;
  432 + }
  433 + else {
  434 + if (usableWidth>0) {
430 if (usableLength > 1) { 435 if (usableLength > 1) {
431 usableLength--; 436 usableLength--;
432 usableWidth -= width; 437 usableWidth -= width;
433 columnWidth = parseInt(usableWidth / usableLength); 438 columnWidth = parseInt(usableWidth / usableLength);
434 } 439 }
  440 + else {
  441 + columnWidth = 0;
  442 + }
  443 + }
  444 + else{
  445 + columnWidth = 0;
435 } 446 }
436 } 447 }
  448 + }
437 449
438 - this.cloneColumns[i]._width = width; 450 + this.cloneColumns[i]._width = width;
439 451
440 - columnsWidth[column._index] = {  
441 - width: width  
442 - }; 452 + columnsWidth[column._index] = {
  453 + width: width
  454 + };
443 455
444 - }  
445 - //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);  
446 - this.columnsWidth = columnsWidth;  
447 - this.$nextTick(()=>{  
448 - this.fixedHeader();  
449 -  
450 - });  
451 - });  
452 - // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth  
453 - this.bodyRealHeight = parseInt(getStyle(this.$refs.tbody.$el, 'height'));  
454 - }); 456 + }
  457 + //this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0);
  458 + this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);
  459 + this.columnsWidth = columnsWidth;
  460 + this.fixedHeader();
455 }, 461 },
456 handleMouseIn (_index) { 462 handleMouseIn (_index) {
457 if (this.disabledHover) return; 463 if (this.disabledHover) return;
@@ -567,9 +573,9 @@ @@ -567,9 +573,9 @@
567 } 573 }
568 }, 574 },
569 fixedBody (){ 575 fixedBody (){
570 - this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;  
571 - this.headerHeight = this.$refs.header.childNodes[0].offsetHeight;  
572 - this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.parentElement.offsetWidth; 576 + this.headerWidth = this.$refs.header.children[0].offsetWidth;
  577 + this.headerHeight = this.$refs.header.children[0].offsetHeight;
  578 + this.showHorizontalScrollBar = this.headerWidth>this.$refs.header.offsetWidth;
573 if (!this.$refs.tbody || !this.data || this.data.length === 0) { 579 if (!this.$refs.tbody || !this.data || this.data.length === 0) {
574 this.showVerticalScrollBar = false; 580 this.showVerticalScrollBar = false;
575 } 581 }
@@ -592,7 +598,6 @@ @@ -592,7 +598,6 @@
592 bodyEl.classList.remove(this.prefixCls +'-overflowX'); 598 bodyEl.classList.remove(this.prefixCls +'-overflowX');
593 } 599 }
594 } 600 }
595 - this.tableWidth = this.cloneColumns.map(cell => cell._width).reduce((a, b) => a + b, 0) + (this.showVerticalScrollBar?this.scrollBarWidth:0);  
596 }, 601 },
597 602
598 hideColumnFilter () { 603 hideColumnFilter () {
@@ -859,6 +864,25 @@ @@ -859,6 +864,25 @@
859 makeColumnRows (fixedType) { 864 makeColumnRows (fixedType) {
860 return convertToRows(this.columns, fixedType); 865 return convertToRows(this.columns, fixedType);
861 }, 866 },
  867 + setMinMaxColumnRows (){
  868 + let minWidthColumns=[];
  869 + let maxWidthColumns=[];
  870 + this.cloneColumns.forEach((col) => {
  871 + if (!col.width) {
  872 + if(col.minWidth){
  873 + minWidthColumns.push(col);
  874 + }
  875 + if(col.maxWidth){
  876 + maxWidthColumns.push(col);
  877 + }
  878 + }
  879 + });
  880 +
  881 + minWidthColumns.sort((a,b)=>a.minWidth > b.minWidth);
  882 + maxWidthColumns.sort((a,b)=>a.maxWidth < b.maxWidth);
  883 + this.minWidthColumns = minWidthColumns;
  884 + this.maxWidthColumns = maxWidthColumns;
  885 + },
862 exportCsv (params) { 886 exportCsv (params) {
863 if (params.filename) { 887 if (params.filename) {
864 if (params.filename.indexOf('.csv') === -1) { 888 if (params.filename.indexOf('.csv') === -1) {
@@ -895,6 +919,7 @@ @@ -895,6 +919,7 @@
895 }, 919 },
896 mounted () { 920 mounted () {
897 this.handleResize(); 921 this.handleResize();
  922 + this.setMinMaxColumnRows();
898 this.$nextTick(() => this.ready = true); 923 this.$nextTick(() => this.ready = true);
899 924
900 on(window, 'resize', this.handleResize); 925 on(window, 'resize', this.handleResize);
@@ -933,6 +958,8 @@ @@ -933,6 +958,8 @@
933 // todo 这里有性能问题，可能是左右固定计算属性影响的 958 // todo 这里有性能问题，可能是左右固定计算属性影响的
934 this.allColumns = getAllColumns(this.columns); 959 this.allColumns = getAllColumns(this.columns);
935 this.cloneColumns = this.makeColumns(); 960 this.cloneColumns = this.makeColumns();
  961 + this.setMinMaxColumnRows();
  962 +
936 this.columnRows = this.makeColumnRows(false); 963 this.columnRows = this.makeColumnRows(false);
937 this.leftFixedColumnRows = this.makeColumnRows('left'); 964 this.leftFixedColumnRows = this.makeColumnRows('left');
938 this.rightFixedColumnRows = this.makeColumnRows('right'); 965 this.rightFixedColumnRows = this.makeColumnRows('right');