other / mew-iview

Commit 46c73823e095fbea2aa58e21ae4f3448467d2fa0

Authored by Aresn
Committed by GitHub
2 parents 8087ae45 75803add

Merge pull request #3245 from huanghong1125/2.0 

fixed table scollbar
Showing 6 changed files with 99 additions and 44 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @46c7382
... ... @@ -5,10 +5,12 @@
5 5 <br><br><br><br><br>
6 6 <!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
7 7 <!--<br><br><br><br><br>-->
8   - <Table border :columns="columns5" height="200" :data="data5"></Table>
  8 + <Table border :columns="columns5" height="240" :data="data5"></Table>
9 9 <br><br><br><br><br>
10 10 <Table border :columns="columns6" :data="data5"></Table>
11 11 <br><br><br><br><br>
  12 + <Table border :columns="columns7" height="240" :data="data7"></Table>
  13 + <br><br><br><br><br>
12 14 </div>
13 15 </template>
14 16 <script>
... ... @@ -103,19 +105,19 @@
103 105 }
104 106 ]
105 107 },
  108 + // {
  109 + // title: 'Gender',
  110 + // key: 'gender',
  111 + // align: 'center',
  112 + // width: 200,
  113 + // fixed: 'right'
  114 + // },
106 115 {
107 116 title: 'Gender',
108 117 key: 'gender',
109 118 align: 'center',
110 119 width: 200,
111   - fixed: 'right'
112   - },
113   - {
114   - title: 'Gender',
115   - key: 'gender',
116   - align: 'center',
117   - width: 200,
118   - fixed: 'right'
  120 + //fixed: 'right'
119 121 }
120 122 ],
121 123 columns2: [
... ... @@ -342,6 +344,55 @@
342 344 }
343 345 }
344 346 ],
  347 +
  348 + columns7: [
  349 + {
  350 + title: 'Date',
  351 + key: 'date',
  352 + sortable: true,
  353 + width:200,
  354 + },
  355 + {
  356 + title: 'Name',
  357 + key: 'name',
  358 + width:200,
  359 + },
  360 + {
  361 + title: 'Age',
  362 + key: 'age',
  363 + },
  364 + {
  365 + title: 'Address',
  366 + key: 'address',
  367 + width:200,
  368 + }
  369 + ],
  370 + data7: [
  371 + {
  372 + name: 'John Brown',
  373 + age: 18,
  374 + address: 'New York No. 1 Lake Park',
  375 + date: '2016-10-03'
  376 + },
  377 + {
  378 + name: 'Jim Green',
  379 + age: 24,
  380 + address: 'London No. 1 Lake Park',
  381 + date: '2016-10-01'
  382 + },
  383 + {
  384 + name: 'Joe Black',
  385 + age: 30,
  386 + address: 'Sydney No. 1 Lake Park Sydney No. 1 Lake Park',
  387 + date: '2016-10-02'
  388 + },
  389 + {
  390 + name: 'Jon Snow',
  391 + age: 26,
  392 + address: 'Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park Ottawa No. 2 Lake Park',
  393 + date: '2016-10-04'
  394 + }
  395 + ],
345 396 }
346 397 },
347 398 mounted () {
... ...
src/components/table/mixin.js
  Show/Hide comments   View file @46c7382
... ... @@ -17,37 +17,13 @@ export default {
17 17 isPopperShow (column) {
18 18 return column.filters && ((!this.fixed && !column.fixed) || (this.fixed === 'left' && column.fixed === 'left') || (this.fixed === 'right' && column.fixed === 'right'));
19 19 },
20   - setCellWidth (column, index, top) {
  20 + setCellWidth (column) {
21 21 let width = '';
22 22 if (column.width) {
23 23 width = column.width;
24 24 } else if (this.columnsWidth[column._index]) {
25 25 width = this.columnsWidth[column._index].width;
26 26 }
27   - // when browser has scrollBar,set a width to resolve scroll position bug
28   - if (width && this.columns.length === index + 1 && top && this.$parent.bodyHeight !== 0 && column.fixed!=='left' && !this.fixed) {
29   - let scrollBarWidth = this.$parent.scrollBarWidth;
30   - if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
31   - width += scrollBarWidth;
32   - }
33   - // when fixed type,reset first right fixed column's width
34   - if (this.fixed === 'right' && top ) {
35   - //const firstFixedIndex = this.columns.lastIndexOf((col) => col.fixed === 'right');
36   - let lastFixedIndex = -1;
37   - for(let i=0;i<this.columns.length;i++){
38   - if(this.columns[i].fixed==='right'){
39   - lastFixedIndex = i;
40   - }
41   - else{
42   - break;
43   - }
44   - }
45   - if (lastFixedIndex === index) {
46   - let scrollBarWidth = this.$parent.scrollBarWidth;
47   - if (!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
48   - width += scrollBarWidth;
49   - }
50   - }
51 27 if (width === '0') width = '';
52 28 return width;
53 29 }
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @46c7382
1 1 <template>
2 2 <table cellspacing="0" cellpadding="0" border="0" :style="styleObject">
3 3 <colgroup>
4   - <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
  4 + <col v-for="(column, index) in columns" :width="setCellWidth(column)">
5 5 </colgroup>
6 6 <tbody :class="[prefixCls + '-tbody']">
7 7 <template v-for="(row, index) in data">
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @46c7382
1 1 <template>
2 2 <table cellspacing="0" cellpadding="0" border="0" :style="styles">
3 3 <colgroup>
4   - <col v-for="(column, index) in columns" :width="setCellWidth(column, index, true)">
  4 + <col v-for="(column, index) in columns" :width="setCellWidth(column)">
  5 + <col v-if="$parent.showVerticalScrollBar" :width="$parent.scrollBarWidth"/>
5 6 </colgroup>
6 7 <thead>
7 8 <tr v-for="(cols, rowIndex) in headRows">
... ... @@ -59,6 +60,8 @@
59 60 </template>
60 61 </div>
61 62 </th>
  63 +
  64 + <th v-if="$parent.showVerticalScrollBar && rowIndex===0" :class='scrollBarCellClass()' :rowspan="headRows.length"></th>
62 65 </tr>
63 66 </thead>
64 67 </table>
... ... @@ -93,12 +96,7 @@
93 96 computed: {
94 97 styles () {
95 98 const style = Object.assign({}, this.styleObject);
96   - let scrollBarWidth = this.$parent.scrollBarWidth;
97   - if(!this.$parent.showVerticalScrollBar) scrollBarWidth = 0;
98   -
99   - let isLeftFixed = this.$el && this.$el.parentElement.className.indexOf('fixed-header')>0;
100   - if(isLeftFixed) scrollBarWidth = 0;
101   - const width = this.$parent.bodyHeight === 0 ? parseInt(this.styleObject.width) : parseInt(this.styleObject.width) + scrollBarWidth;
  99 + const width = parseInt(this.styleObject.width) ;
102 100 style.width = `${width}px`;
103 101 return style;
104 102 },
... ... @@ -133,6 +131,23 @@
133 131 }
134 132 ];
135 133 },
  134 + scrollBarCellClass(){
  135 + let hasRightFixed = false;
  136 + for(var i in this.headRows){
  137 + for(var j in this.headRows[i]){
  138 + if(this.headRows[i][j].fixed === 'right') {
  139 + hasRightFixed=true;
  140 + break;
  141 + }
  142 + if(hasRightFixed) break;
  143 + }
  144 + }
  145 + return [
  146 + {
  147 + [`${this.prefixCls}-hidden`]: hasRightFixed
  148 + }
  149 + ];
  150 + },
136 151 itemClasses (column, item) {
137 152 return [
138 153 `${this.prefixCls}-filter-select-item`,
... ...
src/components/table/table.vue
  Show/Hide comments   View file @46c7382
... ... @@ -5,7 +5,7 @@
5 5 <div :class="[prefixCls + '-header']" v-if="showHeader" ref="header" @mousewheel="handleMouseWheel">
6 6 <table-head
7 7 :prefix-cls="prefixCls"
8   - :styleObject="tableStyle"
  8 + :styleObject="tableHeaderStyle"
9 9 :columns="cloneColumns"
10 10 :column-rows="columnRows"
11 11 :obj-data="objData"
... ... @@ -275,6 +275,15 @@
275 275 }
276 276 return style;
277 277 },
  278 + tableHeaderStyle () {
  279 + let style = {};
  280 + if (this.tableWidth !== 0) {
  281 + let width = '';
  282 + width = this.tableWidth;
  283 + style.width = `${width}px`;
  284 + }
  285 + return style;
  286 + },
278 287 fixedTableStyle () {
279 288 let style = {};
280 289 let width = 0;
... ... @@ -887,6 +896,10 @@
887 896 height () {
888 897 this.handleResize();
889 898 this.fixedHeader();
  899 + },
  900 + showHorizontalScrollBar () {
  901 + this.handleResize();
  902 + this.fixedHeader();
890 903 }
891 904 }
892 905 };
... ...
src/styles/components/table.less
  Show/Hide comments   View file @46c7382
... ... @@ -71,7 +71,7 @@
71 71 overflow: hidden;
72 72 }
73 73 &-body{
74   - overflow: auto;
  74 + //overflow: auto;
75 75 //position: relative;
76 76  
77 77 }
... ...