chenhaodong / mew-iview

Commit 39311a508f44cc6174feb6da6ce90dee7c98d15d

Authored by 梁灏
1 parent 6c99b9fe

update Table 

update Table
Showing 5 changed files with 67 additions and 44 deletions   Show diff stats
Inline Side-by-side
src/components/table/table-body.vue
  Show/Hide comments   View file @39311a5
@@ -70,4 +70,4 @@ @@ -70,4 +70,4 @@
70 } 70 }
71 } 71 }
72 } 72 }
73 -</script> 73 -</script>
  74 +</script>
74 \ No newline at end of file 75 \ No newline at end of file
src/components/table/table-head.vue
  Show/Hide comments   View file @39311a5
@@ -128,4 +128,4 @@ @@ -128,4 +128,4 @@
128 } 128 }
129 } 129 }
130 } 130 }
131 -</script> 131 -</script>
  132 +</script>
132 \ No newline at end of file 133 \ No newline at end of file
src/components/table/table.vue
  Show/Hide comments   View file @39311a5
1 <template> 1 <template>
2 <div :class="wrapClasses" :style="styles"> 2 <div :class="wrapClasses" :style="styles">
3 - <div :class="classes" :style="styles"> 3 + <div :class="classes">
4 <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div> 4 <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
5 <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel"> 5 <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header @mousewheel="handleMouseWheel">
6 <table-head 6 <table-head
7 - :prefix-cls="prefixCls"  
8 - :style="tableStyle"  
9 - :columns="cloneColumns"  
10 - :obj-data="objData"  
11 - :data="rebuildData"></table-head> 7 + :prefix-cls="prefixCls"
  8 + :style="tableStyle"
  9 + :columns="cloneColumns"
  10 + :obj-data="objData"
  11 + :data="rebuildData"></table-head>
12 </div> 12 </div>
13 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll"> 13 <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
14 <table-body 14 <table-body
15 - v-ref:tbody  
16 - :prefix-cls="prefixCls"  
17 - :style="tableStyle"  
18 - :columns="cloneColumns"  
19 - :data="rebuildData"  
20 - :obj-data="objData"></table-body> 15 + v-ref:tbody
  16 + :prefix-cls="prefixCls"
  17 + :style="tableStyle"
  18 + :columns="cloneColumns"
  19 + :data="rebuildData"
  20 + :obj-data="objData"></table-body>
21 </div> 21 </div>
22 <div :class="[prefixCls + '-fixed']"> 22 <div :class="[prefixCls + '-fixed']">
23 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> 23 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
24 <table-head 24 <table-head
25 - fixed  
26 - :prefix-cls="prefixCls"  
27 - :style="fixedTableStyle"  
28 - :columns="leftFixedColumns"  
29 - :obj-data="objData"  
30 - :data="rebuildData"></table-head> 25 + fixed
  26 + :prefix-cls="prefixCls"
  27 + :style="fixedTableStyle"
  28 + :columns="leftFixedColumns"
  29 + :obj-data="objData"
  30 + :data="rebuildData"></table-head>
31 </div> 31 </div>
32 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body> 32 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
33 <table-body 33 <table-body
34 - fixed  
35 - :prefix-cls="prefixCls"  
36 - :style="fixedTableStyle"  
37 - :columns="leftFixedColumns"  
38 - :data="rebuildData"  
39 - :obj-data="objData"></table-body> 34 + fixed
  35 + :prefix-cls="prefixCls"
  36 + :style="fixedTableStyle"
  37 + :columns="leftFixedColumns"
  38 + :data="rebuildData"
  39 + :obj-data="objData"></table-body>
40 </div> 40 </div>
41 </div> 41 </div>
42 <div :class="[prefixCls + '-fixed-right']"> 42 <div :class="[prefixCls + '-fixed-right']">
43 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader"> 43 <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
44 <table-head 44 <table-head
45 - fixed  
46 - :prefix-cls="prefixCls"  
47 - :style="fixedRightTableStyle"  
48 - :columns="rightFixedColumns"  
49 - :obj-data="objData"  
50 - :data="rebuildData"></table-head> 45 + fixed
  46 + :prefix-cls="prefixCls"
  47 + :style="fixedRightTableStyle"
  48 + :columns="rightFixedColumns"
  49 + :obj-data="objData"
  50 + :data="rebuildData"></table-head>
51 </div> 51 </div>
52 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body> 52 <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
53 <table-body 53 <table-body
54 - fixed  
55 - :prefix-cls="prefixCls"  
56 - :style="fixedRightTableStyle"  
57 - :columns="rightFixedColumns"  
58 - :data="rebuildData"  
59 - :obj-data="objData"></table-body> 54 + fixed
  55 + :prefix-cls="prefixCls"
  56 + :style="fixedRightTableStyle"
  57 + :columns="rightFixedColumns"
  58 + :data="rebuildData"
  59 + :obj-data="objData"></table-body>
60 </div> 60 </div>
61 </div> 61 </div>
62 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div> 62 <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
src/styles/components/table.less
  Show/Hide comments   View file @39311a5
@@ -8,7 +8,8 @@ @@ -8,7 +8,8 @@
8 border-bottom: 0; 8 border-bottom: 0;
9 border-right: 0; 9 border-right: 0;
10 } 10 }
11 - width: 100%; 11 + width: inherit;
  12 + height: 100%;
12 max-width: 100%; 13 max-width: 100%;
13 overflow: hidden; 14 overflow: hidden;
14 color: @text-color; 15 color: @text-color;
@@ -205,7 +206,8 @@ @@ -205,7 +206,8 @@
205 position: absolute; 206 position: absolute;
206 top: 0; 207 top: 0;
207 left: 0; 208 left: 0;
208 - box-shadow: @shadow-right; 209 + //box-shadow: @shadow-right;
  210 + box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);
209 211
210 &::before { 212 &::before {
211 content: ''; 213 content: '';
@@ -222,12 +224,13 @@ @@ -222,12 +224,13 @@
222 top: 0; 224 top: 0;
223 left: auto; 225 left: auto;
224 right: 0; 226 right: 0;
225 - box-shadow: @shadow-left; 227 + //box-shadow: @shadow-left;
  228 + box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);
226 } 229 }
227 &-fixed-header{ 230 &-fixed-header{
228 overflow: hidden; 231 overflow: hidden;
229 //position: relative; 232 //position: relative;
230 - z-index: 3; 233 + //z-index: 3;
231 } 234 }
232 &-fixed-body{ 235 &-fixed-body{
233 overflow: hidden; 236 overflow: hidden;
@@ -235,6 +238,17 @@ @@ -235,6 +238,17 @@
235 z-index: 3; 238 z-index: 3;
236 } 239 }
237 240
  241 + &-fixed-shadow {
  242 + width: 1px;
  243 + height: 100%;
  244 + position: absolute;
  245 + top: 0;
  246 + right: 0;
  247 + box-shadow: @shadow-right;
  248 + overflow: hidden;
  249 + z-index: 1;
  250 + }
  251 +
238 &-sort{ 252 &-sort{
239 .sortable(); 253 .sortable();
240 } 254 }
test/routers/table.vue
  Show/Hide comments   View file @39311a5
@@ -8,9 +8,10 @@ @@ -8,9 +8,10 @@
8 <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>--> 8 <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
9 <br> 9 <br>
10 <i-table 10 <i-table
11 - width="850" 11 + width="450"
  12 + :height="height"
12 stripe 13 stripe
13 - border 14 + :border="true"
14 highlight-row 15 highlight-row
15 :show-header="true" 16 :show-header="true"
16 :columns="columns" 17 :columns="columns"
@@ -239,6 +240,14 @@ @@ -239,6 +240,14 @@
239 // }); 240 // });
240 // this.data.splice(0, 1); 241 // this.data.splice(0, 1);
241 // this.columns.splice(2,1) 242 // this.columns.splice(2,1)
  243 +// this.data.push({
  244 +// name: '梁灏2',
  245 +// age: 25,
  246 +// address: '北京市朝阳区',
  247 +// edit: false,
  248 +// tag: 'home',
  249 +// action: 1
  250 +// })
242 }, 3000); 251 }, 3000);
243 } 252 }
244 } 253 }