other / 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 18 :clone-data="cloneData"></table-body>
19 19 </div>
20 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 38 </div>
36 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 57 </div>
51 58 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
52 59 </div>
... ... @@ -161,6 +168,11 @@
161 168 let style = {};
162 169 if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
163 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 178 methods: {
... ... @@ -179,7 +191,6 @@
179 191 this.columnsWidth = [];
180 192 let autoWidthIndex = -1;
181 193 if (allWidth) autoWidthIndex = this.cloneColumns.findIndex(cell => !cell.width);
182   - console.log(1)
183 194  
184 195 const $td = this.$refs.tbody.$el.querySelectorAll('tbody tr')[0].querySelectorAll('td');
185 196 for (let i = 0; i < $td.length; i++) { // can not use forEach in Firefox
... ... @@ -291,9 +302,9 @@
291 302 this.cloneColumns = left.concat(center).concat(right);
292 303 },
293 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 309 handleMouseWheel (event) {
299 310 const deltaX = event.deltaX;
... ...
src/styles/components/table.less
  Show/Hide comments   View file @b8a4300
... ... @@ -33,7 +33,7 @@
33 33 top: 0;
34 34 right: 0;
35 35 background-color: @border-color-base;
36   - z-index: 1;
  36 + z-index: 3;
37 37 }
38 38  
39 39 &-with-header{
... ... @@ -140,7 +140,9 @@
140 140 vertical-align: middle;
141 141 }
142 142  
143   - &-stripe &-body{
  143 + &-stripe &-body,
  144 + &-stripe &-fixed-body
  145 + {
144 146 tr:nth-child(2n) {
145 147 td{
146 148 background-color: @table-td-stripe-bg;
... ... @@ -183,7 +185,8 @@
183 185  
184 186 &-row-highlight,
185 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 191 td{
189 192 background-color: @table-td-highlight-bg;
... ... @@ -214,4 +217,14 @@
214 217 right: 0;
215 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 231 \ No newline at end of file
... ...
test/routers/table.vue
  Show/Hide comments   View file @b8a4300
... ... @@ -9,7 +9,10 @@
9 9 <br>
10 10 <i-table
11 11 width="450"
12   - border
  12 + height="200"
  13 + stripe
  14 + highlight-row
  15 + :show-header="true"
13 16 :columns="columns"
14 17 :data="data"
15 18 :row-class-name="rowClsName"
... ... @@ -61,6 +64,7 @@
61 64 title: '地址',
62 65 key: 'address',
63 66 align: 'center',
  67 +// fixed: 'right',
64 68 width: 100,
65 69 // render (row, column, index) {
66 70 // if (row.edit) {
... ...