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 41 template: path.join(__dirname, '../examples/index.html')
42 42 }),
43 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 2 <div>
3 3 <br><br><br><br><br>
4 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 6 <!-- <br><br><br><br><br> -->
7 7 <!-- <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> -->
8 8 <!--<br><br><br><br><br>-->
... ... @@ -12,8 +12,8 @@
12 12 <!-- <br><br><br><br><br> -->
13 13 <Table border :columns="columns7" height="240" :data="data7"></Table>
14 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 17 <br><br><br><br><br>
18 18 </div>
19 19 </template>
... ... @@ -372,6 +372,7 @@
372 372 {
373 373 title: 'Age',
374 374 key: 'age',
  375 + width:200,
375 376 },
376 377 {
377 378 title: 'Address',
... ...
src/components/table/table.vue
  Show/Hide comments   View file @9d304dd
... ... @@ -187,6 +187,8 @@
187 187 objData: this.makeObjData(), // checkbox or highlight-row
188 188 rebuildData: [], // for sort or filter
189 189 cloneColumns: this.makeColumns(),
  190 + minWidthColumns:[],
  191 + maxWidthColumns:[],
190 192 columnRows: this.makeColumnRows(false),
191 193 leftFixedColumnRows: this.makeColumnRows('left'),
192 194 rightFixedColumnRows: this.makeColumnRows('right'),
... ... @@ -194,7 +196,6 @@
194 196 showSlotHeader: true,
195 197 showSlotFooter: true,
196 198 bodyHeight: 0,
197   - bodyRealHeight: 0,
198 199 scrollBarWidth: getScrollBarSize(),
199 200 currentContext: this.context,
200 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 265 if (this.bodyHeight === 0) {
265 266 width = this.tableWidth;
266 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 270 // const width = this.bodyHeight === 0 ? this.tableWidth : this.tableWidth - this.scrollBarWidth;
274 271 style.width = `${width}px`;
... ... @@ -349,109 +346,118 @@
349 346 return this.rowClassName(this.data[index], index);
350 347 },
351 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 397 minWidthColumns[i]._width = minWidthColumns[i].minWidth;
403 398 usableWidth -= minWidthColumns[i].minWidth;
404 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 435 if (usableLength > 1) {
431 436 usableLength--;
432 437 usableWidth -= width;
433 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 462 handleMouseIn (_index) {
457 463 if (this.disabledHover) return;
... ... @@ -567,9 +573,9 @@
567 573 }
568 574 },
569 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 579 if (!this.$refs.tbody || !this.data || this.data.length === 0) {
574 580 this.showVerticalScrollBar = false;
575 581 }
... ... @@ -592,7 +598,6 @@
592 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 603 hideColumnFilter () {
... ... @@ -859,6 +864,25 @@
859 864 makeColumnRows (fixedType) {
860 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 886 exportCsv (params) {
863 887 if (params.filename) {
864 888 if (params.filename.indexOf('.csv') === -1) {
... ... @@ -895,6 +919,7 @@
895 919 },
896 920 mounted () {
897 921 this.handleResize();
  922 + this.setMinMaxColumnRows();
898 923 this.$nextTick(() => this.ready = true);
899 924  
900 925 on(window, 'resize', this.handleResize);
... ... @@ -933,6 +958,8 @@
933 958 // todo 这里有性能问题，可能是左右固定计算属性影响的
934 959 this.allColumns = getAllColumns(this.columns);
935 960 this.cloneColumns = this.makeColumns();
  961 + this.setMinMaxColumnRows();
  962 +
936 963 this.columnRows = this.makeColumnRows(false);
937 964 this.leftFixedColumnRows = this.makeColumnRows('left');
938 965 this.rightFixedColumnRows = this.makeColumnRows('right');
... ...