chenhaodong / mew-iview

Commit b8a4300003832a49462738263ab29a582a805ee7

Authored by 梁灏
1 parent 340681ab

update Table 

update Table
Showing 3 changed files with 63 additions and 35 deletions   Show diff stats
Inline Side-by-side
src/components/table/table.vue
  Show/Hide comments   View file @b8a4300
@@ -18,35 +18,42 @@ @@ -18,35 +18,42 @@
18 :clone-data="cloneData"></table-body> 18 :clone-data="cloneData"></table-body>
19 </div> 19 </div>
20 <div :class="[prefixCls + '-fixed']"> 20 <div :class="[prefixCls + '-fixed']">
21 - <!--todo 设置个div头部-->  
22 - <table-head  
23 - fixed  
24 - :prefix-cls="prefixCls"  
25 - :style="fixedTableStyle"  
26 - :columns="leftFixedColumns"  
27 - :clone-data="cloneData"></table-head>  
28 - <table-body  
29 - fixed  
30 - :prefix-cls="prefixCls"  
31 - :style="fixedTableStyle"  
32 - :columns="leftFixedColumns"  
33 - :data="data"  
34 - :clone-data="cloneData"></table-body> 21 + <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  22 + <table-head
  23 + fixed
  24 + :prefix-cls="prefixCls"
  25 + :style="fixedTableStyle"
  26 + :columns="leftFixedColumns"
  27 + :clone-data="cloneData"></table-head>
  28 + </div>
  29 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
  30 + <table-body
  31 + fixed
  32 + :prefix-cls="prefixCls"
  33 + :style="fixedTableStyle"
  34 + :columns="leftFixedColumns"
  35 + :data="data"
  36 + :clone-data="cloneData"></table-body>
  37 + </div>
35 </div> 38 </div>
36 <div :class="[prefixCls + '-fixed-right']"> 39 <div :class="[prefixCls + '-fixed-right']">
37 - <table-head  
38 - fixed  
39 - :prefix-cls="prefixCls"  
40 - :style="fixedRightTableStyle"  
41 - :columns="rightFixedColumns"  
42 - :clone-data="cloneData"></table-head>  
43 - <table-body  
44 - fixed  
45 - :prefix-cls="prefixCls"  
46 - :style="fixedRightTableStyle"  
47 - :columns="rightFixedColumns"  
48 - :data="data"  
49 - :clone-data="cloneData"></table-body> 40 + <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  41 + <table-head
  42 + fixed
  43 + :prefix-cls="prefixCls"
  44 + :style="fixedRightTableStyle"
  45 + :columns="rightFixedColumns"
  46 + :clone-data="cloneData"></table-head>
  47 + </div>
  48 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
  49 + <table-body
  50 + fixed
  51 + :prefix-cls="prefixCls"
  52 + :style="fixedRightTableStyle"
  53 + :columns="rightFixedColumns"
  54 + :data="data"
  55 + :clone-data="cloneData"></table-body>
  56 + </div>
50 </div> 57 </div>
51 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> 58 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
52 </div> 59 </div>
@@ -161,6 +168,11 @@ @@ -161,6 +168,11 @@
161 let style = {}; 168 let style = {};
162 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`; 169 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
163 return style; 170 return style;
  171 + },
  172 + fixedBodyStyle () {
  173 + let style = {};
  174 + if (this.bodyHeight !== 0) style.height = `${this.bodyHeight - 1}px`;
  175 + return style;
164 } 176 }
165 }, 177 },
166 methods: { 178 methods: {
@@ -179,7 +191,6 @@ @@ -179,7 +191,6 @@
179 this.columnsWidth = []; 191 this.columnsWidth = [];
180 let autoWidthIndex = -1; 192 let autoWidthIndex = -1;
181 if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width); 193 if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);
182 - console.log(1)  
183 194
184 const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td'); 195 const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
185 for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox 196 for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
@@ -291,9 +302,9 @@ @@ -291,9 +302,9 @@
291 this.cloneColumns = left.concat(center).concat(right); 302 this.cloneColumns = left.concat(center).concat(right);
292 }, 303 },
293 handleBodyScroll (event) { 304 handleBodyScroll (event) {
294 - this.$els.header.scrollLeft = event.target.scrollLeft;  
295 -  
296 - // todo 固定时上下滚动，固定的表头也滚动 scrollTop 305 + if (this.showHeader) this.$els.header.scrollLeft = event.target.scrollLeft;
  306 + if (this.leftFixedColumns.length) this.$els.fixedBody.scrollTop = event.target.scrollTop;
  307 + if (this.rightFixedColumns.length) this.$els.fixedRightBody.scrollTop = event.target.scrollTop;
297 }, 308 },
298 handleMouseWheel (event) { 309 handleMouseWheel (event) {
299 const deltaX = event.deltaX; 310 const deltaX = event.deltaX;
src/styles/components/table.less
  Show/Hide comments   View file @b8a4300
@@ -33,7 +33,7 @@ @@ -33,7 +33,7 @@
33 top: 0; 33 top: 0;
34 right: 0; 34 right: 0;
35 background-color: @border-color-base; 35 background-color: @border-color-base;
36 - z-index: 1; 36 + z-index: 3;
37 } 37 }
38 38
39 &-with-header{ 39 &-with-header{
@@ -140,7 +140,9 @@ @@ -140,7 +140,9 @@
140 vertical-align: middle; 140 vertical-align: middle;
141 } 141 }
142 142
143 - &-stripe &-body{ 143 + &-stripe &-body,
  144 + &-stripe &-fixed-body
  145 + {
144 tr:nth-child(2n) { 146 tr:nth-child(2n) {
145 td{ 147 td{
146 background-color: @table-td-stripe-bg; 148 background-color: @table-td-stripe-bg;
@@ -183,7 +185,8 @@ @@ -183,7 +185,8 @@
183 185
184 &-row-highlight, 186 &-row-highlight,
185 tr&-row-highlight&-row-hover, 187 tr&-row-highlight&-row-hover,
186 - &-stripe &-body tr&-row-highlight:nth-child(2n) 188 + &-stripe &-body tr&-row-highlight:nth-child(2n),
  189 + &-stripe &-fixed-body tr&-row-highlight:nth-child(2n)
187 { 190 {
188 td{ 191 td{
189 background-color: @table-td-highlight-bg; 192 background-color: @table-td-highlight-bg;
@@ -214,4 +217,14 @@ @@ -214,4 +217,14 @@
214 right: 0; 217 right: 0;
215 box-shadow: -1px 0 8px #d3d4d6; 218 box-shadow: -1px 0 8px #d3d4d6;
216 } 219 }
  220 + &-fixed-header{
  221 + overflow: hidden;
  222 + position: relative;
  223 + z-index: 3;
  224 + }
  225 + &-fixed-body{
  226 + overflow: hidden;
  227 + position: relative;
  228 + z-index: 3;
  229 + }
217 } 230 }
218 \ No newline at end of file 231 \ No newline at end of file
test/routers/table.vue
  Show/Hide comments   View file @b8a4300
@@ -9,7 +9,10 @@ @@ -9,7 +9,10 @@
9 <br> 9 <br>
10 <i-table 10 <i-table
11 width="450" 11 width="450"
12 - border 12 + height="200"
  13 + stripe
  14 + highlight-row
  15 + :show-header="true"
13 :columns="columns" 16 :columns="columns"
14 :data="data" 17 :data="data"
15 :row-class-name="rowClsName" 18 :row-class-name="rowClsName"
@@ -61,6 +64,7 @@ @@ -61,6 +64,7 @@
61 title: '地址', 64 title: '地址',
62 key: 'address', 65 key: 'address',
63 align: 'center', 66 align: 'center',
  67 +// fixed: 'right',
64 width: 100, 68 width: 100,
65 // render (row, column, index) { 69 // render (row, column, index) {
66 // if (row.edit) { 70 // if (row.edit) {