other / mew-iview

Commit 9fea8e7de0d990528e339e6d8859c63b02e0e5b8

Authored by huanghong
1 parent 8e171de8

fixed ivu-table-fixed-right scroll bar

Showing 4 changed files with 146 additions and 27 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @9fea8e7
@@ -5,7 +5,12 @@ @@ -5,7 +5,12 @@
5 <Button @click="handleClearData">Clear Data</Button> 5 <Button @click="handleClearData">Clear Data</Button>
6 <Button @click="handleSelectAll(true)">Set all selected</Button> 6 <Button @click="handleSelectAll(true)">Set all selected</Button>
7 <Button @click="handleSelectAll(false)">Cancel all selected</Button> 7 <Button @click="handleSelectAll(false)">Cancel all selected</Button>
8 - 8 + <div style='margin:20px 0px'>
  9 + <Table border :columns="columns2" :data="data3"></Table>
  10 + </div>
  11 + <div style='margin:20px 0px'>
  12 + <Table :height='200' border :columns="columns2" :data="data3"></Table>
  13 + </div>
9 <div style='margin:20px 0px;'> 14 <div style='margin:20px 0px;'>
10 <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table> 15 <Table :data="tableData1" :columns="tableColumns1" :height='500' stripe size='small'></Table>
11 <div style="margin: 10px;overflow: hidden"> 16 <div style="margin: 10px;overflow: hidden">
@@ -14,6 +19,7 @@ @@ -14,6 +19,7 @@
14 </div> 19 </div>
15 </div> 20 </div>
16 </div> 21 </div>
  22 +
17 </div> 23 </div>
18 </template> 24 </template>
19 <script> 25 <script>
@@ -49,6 +55,95 @@ @@ -49,6 +55,95 @@
49 data1: [ 55 data1: [
50 56
51 ], 57 ],
  58 + columns2: [
  59 + {
  60 + title: 'Name',
  61 + key: 'name',
  62 + width: 100,
  63 + fixed: 'left'
  64 + },
  65 + {
  66 + title: 'Age',
  67 + key: 'age',
  68 + width: 100
  69 + },
  70 + {
  71 + title: 'Province',
  72 + key: 'province',
  73 + width: 100
  74 + },
  75 + {
  76 + title: 'City',
  77 + key: 'city',
  78 + width: 100
  79 + },
  80 + {
  81 + title: 'Address',
  82 + key: 'address',
  83 + width: 200
  84 + },
  85 + {
  86 + title: 'Postcode',
  87 + key: 'zip',
  88 + width: 100
  89 + },
  90 + {
  91 + title: 'Action',
  92 + key: 'action',
  93 + fixed: 'right',
  94 + width: 120,
  95 + render: (h, params) => {
  96 + return h('div', [
  97 + h('Button', {
  98 + props: {
  99 + type: 'text',
  100 + size: 'small'
  101 + }
  102 + }, 'View'),
  103 + h('Button', {
  104 + props: {
  105 + type: 'text',
  106 + size: 'small'
  107 + }
  108 + }, 'Edit')
  109 + ]);
  110 + }
  111 + }
  112 + ],
  113 + data3: [
  114 + {
  115 + name: 'John Brown',
  116 + age: 18,
  117 + address: 'New York No. 1 Lake Park',
  118 + province: 'America',
  119 + city: 'New York',
  120 + zip: 100000
  121 + },
  122 + {
  123 + name: 'Jim Green',
  124 + age: 24,
  125 + address: 'Washington, D.C. No. 1 Lake Park',
  126 + province: 'America',
  127 + city: 'Washington, D.C.',
  128 + zip: 100000
  129 + },
  130 + {
  131 + name: 'Joe Black',
  132 + age: 30,
  133 + address: 'Sydney No. 1 Lake Park',
  134 + province: 'Australian',
  135 + city: 'Sydney',
  136 + zip: 100000
  137 + },
  138 + {
  139 + name: 'Jon Snow',
  140 + age: 26,
  141 + address: 'Ottawa No. 2 Lake Park',
  142 + province: 'Canada',
  143 + city: 'Ottawa',
  144 + zip: 100000
  145 + }
  146 + ],
52 147
53 tableData1: [], 148 tableData1: [],
54 tableColumns1: [ 149 tableColumns1: [
src/components/table/mixin.js
  Show/Hide comments   View file @9fea8e7
@@ -31,7 +31,7 @@ export default { @@ -31,7 +31,7 @@ export default {
31 width += scrollBarWidth; 31 width += scrollBarWidth;
32 } 32 }
33 // when fixed type,reset first right fixed column's width 33 // when fixed type,reset first right fixed column's width
34 - if (this.fixed === 'right') { 34 + if (this.fixed === 'right' && top ) {
35 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right'); 35 const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right');
36 if (firstFixedIndex === index) { 36 if (firstFixedIndex === index) {
37 let scrollBarWidth = this.$parent.scrollBarWidth; 37 let scrollBarWidth = this.$parent.scrollBarWidth;
src/components/table/table.vue
  Show/Hide comments   View file @9fea8e7
@@ -188,6 +188,7 @@ @@ -188,6 +188,7 @@
188 currentContext: this.context, 188 currentContext: this.context,
189 cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data 189 cloneData: deepCopy(this.data), // when Cell has a button to delete row data, clickCurrentRow will throw an error, so clone a data
190 showVerticalScrollBar:false, 190 showVerticalScrollBar:false,
  191 + showHorizontalScrollBar:false,
191 headerWidth:0 192 headerWidth:0
192 }; 193 };
193 }, 194 },
@@ -277,8 +278,9 @@ @@ -277,8 +278,9 @@
277 this.rightFixedColumns.forEach((col) => { 278 this.rightFixedColumns.forEach((col) => {
278 if (col.fixed && col.fixed === 'right') width += col._width; 279 if (col.fixed && col.fixed === 'right') width += col._width;
279 }); 280 });
280 - width += this.scrollBarWidth; 281 + //width += this.scrollBarWidth;
281 style.width = `${width}px`; 282 style.width = `${width}px`;
  283 + style.right = `${this.showVerticalScrollBar?this.scrollBarWidth:0}px`;
282 return style; 284 return style;
283 }, 285 },
284 bodyStyle () { 286 bodyStyle () {
@@ -293,11 +295,11 @@ @@ -293,11 +295,11 @@
293 fixedBodyStyle () { 295 fixedBodyStyle () {
294 let style = {}; 296 let style = {};
295 if (this.bodyHeight !== 0) { 297 if (this.bodyHeight !== 0) {
296 - let height = this.bodyHeight + this.scrollBarWidth - 1; 298 + let height = this.bodyHeight + (!this.showHorizontalScrollBar?this.scrollBarWidth:0) - 1;
297 299
298 // #2102 ้‡Œ๏ผŒๅฆ‚ๆžœ Table ๆฒกๆœ‰่ฎพ็ฝฎ width๏ผŒ่€Œๆ˜ฏ้›†ๆˆ็ˆถ็บง็š„ width๏ผŒๅ›บๅฎšๅˆ—ไนŸๅบ”่ฏฅไธๅŒ…ๅซๆปšๅŠจๆก้ซ˜ๅบฆ๏ผŒๆ‰€ไปฅ่ฟ™้‡Œ็›ดๆŽฅ่ฎก็ฎ—่กจๆ ผๅฎฝๅบฆ 300 // #2102 ้‡Œ๏ผŒๅฆ‚ๆžœ Table ๆฒกๆœ‰่ฎพ็ฝฎ width๏ผŒ่€Œๆ˜ฏ้›†ๆˆ็ˆถ็บง็š„ width๏ผŒๅ›บๅฎšๅˆ—ไนŸๅบ”่ฏฅไธๅŒ…ๅซๆปšๅŠจๆก้ซ˜ๅบฆ๏ผŒๆ‰€ไปฅ่ฟ™้‡Œ็›ดๆŽฅ่ฎก็ฎ—่กจๆ ผๅฎฝๅบฆ
299 const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; 301 const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
300 - if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth){ 302 + if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth+(this.showVerticalScrollBar?this.scrollBarWidth:0)){
301 height = this.bodyHeight; 303 height = this.bodyHeight;
302 } 304 }
303 // style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`; 305 // style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
@@ -349,12 +351,13 @@ @@ -349,12 +351,13 @@
349 this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; 351 this.tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
350 } 352 }
351 this.columnsWidth = {}; 353 this.columnsWidth = {};
352 - this.fixedHeader();  
353 - this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;  
354 - if (!this.$refs.tbody) {  
355 - this.showVerticalScrollBar = false;  
356 - return;  
357 - } 354 + this.$nextTick(()=>{
  355 + this.headerWidth = this.$refs.header.childNodes[0].offsetWidth;
  356 + if (!this.$refs.tbody) {
  357 + this.showVerticalScrollBar = false;
  358 + return;
  359 + }
  360 + });
358 this.$nextTick(() => { 361 this.$nextTick(() => {
359 let columnsWidth = {}; 362 let columnsWidth = {};
360 let autoWidthIndex = -1; 363 let autoWidthIndex = -1;
@@ -380,22 +383,36 @@ @@ -380,22 +383,36 @@
380 }; 383 };
381 } 384 }
382 this.columnsWidth = columnsWidth; 385 this.columnsWidth = columnsWidth;
  386 + this.$nextTick(()=>{
  387 + this.fixedHeader();
  388 + if (this.$refs.tbody) {
  389 + let bodyContentEl = this.$refs.tbody.$el;
  390 + let bodyEl = bodyContentEl.parentElement;
  391 + let bodyContentHeight = bodyContentEl.offsetHeight;
  392 + let bodyContentWidth = bodyContentEl.offsetWidth;
  393 + let bodyWidth = bodyEl.offsetWidth;
  394 + let bodyHeight = bodyEl.offsetHeight;
  395 + let scrollBarWidth = 0;
  396 + if (bodyWidth < bodyContentWidth + (bodyHeight<bodyContentHeight?this.scrollBarWidth : 0)) {
  397 + scrollBarWidth = this.scrollBarWidth;
  398 + }
  399 +
  400 + this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;
  401 + this.showHorizontalScrollBar = bodyWidth < bodyContentWidth + (this.showVerticalScrollBar?this.scrollBarWidth:0);
  402 +
  403 + if(this.showVerticalScrollBar){
  404 + bodyEl.classList.add(this.prefixCls +'-overflowY')
  405 + }else{
  406 + bodyEl.classList.remove(this.prefixCls +'-overflowY')
  407 + }
  408 + if(this.showHorizontalScrollBar){
  409 + bodyEl.classList.add(this.prefixCls +'-overflowX')
  410 + }else{
  411 + bodyEl.classList.remove(this.prefixCls +'-overflowX')
  412 + }
383 413
384 - if (this.$refs.tbody) {  
385 - let bodyContentEl = this.$refs.tbody.$el;  
386 - let bodyEl = bodyContentEl.parentElement;  
387 - bodyEl.className = '';  
388 - this.$nextTick(() => { bodyEl.className = this.prefixCls + '-body'; });  
389 - let bodyContentHeight = bodyContentEl.offsetHeight;  
390 - let bodyContentWidth = bodyContentEl.offsetWidth;  
391 - let bodyWidth = bodyEl.offsetWidth;  
392 - let bodyHeight = bodyEl.offsetHeight;  
393 - let scrollBarWidth = 0;  
394 - if (bodyWidth < bodyContentWidth) {  
395 - scrollBarWidth = this.scrollBarWidth;  
396 } 414 }
397 - this.showVerticalScrollBar = this.bodyHeight? bodyHeight - scrollBarWidth < bodyContentHeight : false;  
398 - } 415 + });
399 } 416 }
400 }); 417 });
401 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth 418 // get table real height,for fixed when set height prop,but height < table's height,show scrollBarWidth
src/styles/components/table.less
  Show/Hide comments   View file @9fea8e7
@@ -71,8 +71,15 @@ @@ -71,8 +71,15 @@
71 overflow: hidden; 71 overflow: hidden;
72 } 72 }
73 &-body{ 73 &-body{
74 - overflow: auto; 74 + //overflow: auto;
75 //position: relative; 75 //position: relative;
  76 +
  77 + }
  78 + &-overflowX{
  79 + overflow-x: scroll;
  80 + }
  81 + &-overflowY{
  82 + overflow-y: scroll;
76 } 83 }
77 &-tip{ 84 &-tip{
78 overflow-x: auto; 85 overflow-x: auto;
@@ -278,7 +285,7 @@ @@ -278,7 +285,7 @@
278 box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2); 285 box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
279 } 286 }
280 &-fixed-header{ 287 &-fixed-header{
281 - overflow: hidden; 288 + overflow: visible;
282 &-with-empty{ 289 &-with-empty{
283 .@{table-prefix-cls}-hidden{ 290 .@{table-prefix-cls}-hidden{
284 .@{table-prefix-cls}-sort{ 291 .@{table-prefix-cls}-sort{