chenhaodong / mew-iview

Commit e7e8c8ffb398a1a6c16e45cd5375d00448935555

Authored by 梁灏
1 parent 0d136465

update Table 

update Table
Showing 3 changed files with 132 additions and 9 deletions   Show diff stats
Inline Side-by-side
src/components/table/table.vue
  Show/Hide comments   View file @e7e8c8f
1 <template> 1 <template>
2 - <div :class="classes">  
3 - <div :class="[prefixCls + '-header']" v-if="showHeader"> 2 + <div :class="classes" :style="styles">
  3 + <div :class="[prefixCls + '-title']" v-if="showSlotHeader" v-el:title><slot name="header"></slot></div>
  4 + <div :class="[prefixCls + '-header']" v-if="showHeader" v-el:header>
4 <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle"> 5 <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle">
5 <colgroup> 6 <colgroup>
6 <col v-for="column in columns" :width="setCellWidth(column, $index)"> 7 <col v-for="column in columns" :width="setCellWidth(column, $index)">
@@ -12,7 +13,7 @@ @@ -12,7 +13,7 @@
12 :columns="columns"></thead> 13 :columns="columns"></thead>
13 </table> 14 </table>
14 </div> 15 </div>
15 - <div :class="[prefixCls + '-body']"> 16 + <div :class="[prefixCls + '-body']" :style="bodyStyle">
16 <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody> 17 <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
17 <colgroup> 18 <colgroup>
18 <col v-for="column in columns" :width="setCellWidth(column, $index)"> 19 <col v-for="column in columns" :width="setCellWidth(column, $index)">
@@ -20,7 +21,7 @@ @@ -20,7 +21,7 @@
20 <tbody :class="[prefixCls + '-tbody']" v-el:render> 21 <tbody :class="[prefixCls + '-tbody']" v-el:render>
21 <tr 22 <tr
22 v-for="(index, row) in data" 23 v-for="(index, row) in data"
23 - :class="[prefixCls + '-row', {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight}]" 24 + :class="[prefixCls + '-row', rowClsName(index), {[prefixCls + '-row-highlight']: cloneData[index] && cloneData[index]._isHighlight}]"
24 @click.stop="highlightCurrentRow(index)"> 25 @click.stop="highlightCurrentRow(index)">
25 <td v-for="column in columns" :class="alignCls(column)"> 26 <td v-for="column in columns" :class="alignCls(column)">
26 <div :class="[prefixCls + '-cell']"> 27 <div :class="[prefixCls + '-cell']">
@@ -34,6 +35,7 @@ @@ -34,6 +35,7 @@
34 </tbody> 35 </tbody>
35 </table> 36 </table>
36 </div> 37 </div>
  38 + <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
37 </div> 39 </div>
38 </template> 40 </template>
39 <script> 41 <script>
@@ -64,6 +66,9 @@ @@ -64,6 +66,9 @@
64 return oneOf(value, ['small', 'large']); 66 return oneOf(value, ['small', 'large']);
65 } 67 }
66 }, 68 },
  69 + height: {
  70 + type: [Number, String]
  71 + },
67 stripe: { 72 stripe: {
68 type: Boolean, 73 type: Boolean,
69 default: false 74 default: false
@@ -79,6 +84,12 @@ @@ -79,6 +84,12 @@
79 highlightRow: { 84 highlightRow: {
80 type: Boolean, 85 type: Boolean,
81 default: false 86 default: false
  87 + },
  88 + rowClassName: {
  89 + type: Function,
  90 + default () {
  91 + return '';
  92 + }
82 } 93 }
83 }, 94 },
84 data () { 95 data () {
@@ -87,7 +98,10 @@ @@ -87,7 +98,10 @@
87 columnsWidth: [], 98 columnsWidth: [],
88 prefixCls: prefixCls, 99 prefixCls: prefixCls,
89 compiledUids: [], 100 compiledUids: [],
90 - cloneData: deepCopy(this.data) 101 + cloneData: deepCopy(this.data),
  102 + showSlotHeader: true,
  103 + showSlotFooter: true,
  104 + bodyHeight: 0
91 } 105 }
92 }, 106 },
93 computed: { 107 computed: {
@@ -97,17 +111,33 @@ @@ -97,17 +111,33 @@
97 { 111 {
98 [`${prefixCls}-${this.size}`]: !!this.size, 112 [`${prefixCls}-${this.size}`]: !!this.size,
99 [`${prefixCls}-border`]: this.border, 113 [`${prefixCls}-border`]: this.border,
100 - [`${prefixCls}-stripe`]: this.stripe 114 + [`${prefixCls}-stripe`]: this.stripe,
  115 + [`${prefixCls}-with-header`]: this.showSlotHeader,
  116 + [`${prefixCls}-with-footer`]: this.showSlotFooter,
  117 + [`${prefixCls}-with-fixed-top`]: !!this.height
101 } 118 }
102 ] 119 ]
103 }, 120 },
  121 + styles () {
  122 + let style = {};
  123 + if (!!this.height) style.height = `${this.height}px`;
  124 + return style;
  125 + },
104 tableStyle () { 126 tableStyle () {
105 let style = {}; 127 let style = {};
106 if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`; 128 if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`;
107 return style; 129 return style;
  130 + },
  131 + bodyStyle () {
  132 + let style = {};
  133 + if (this.bodyHeight !== 0) style.height = `${this.bodyHeight}px`;
  134 + return style;
108 } 135 }
109 }, 136 },
110 methods: { 137 methods: {
  138 + rowClsName (index) {
  139 + return this.rowClassName(this.data[index], index);
  140 + },
111 renderRow (row, column, index) { 141 renderRow (row, column, index) {
112 return column.type === 'index' ? index + 1 : column.render ? '' : row[column.key]; 142 return column.type === 'index' ? index + 1 : column.render ? '' : row[column.key];
113 }, 143 },
@@ -203,10 +233,25 @@ @@ -203,10 +233,25 @@
203 }, 233 },
204 selectAll () { 234 selectAll () {
205 this.$emit('on-select-all', this.getSelection()); 235 this.$emit('on-select-all', this.getSelection());
  236 + },
  237 + fixedHeader () {
  238 + if (!!this.height) {
  239 + this.$nextTick(() => {
  240 + const titleHeight = parseInt(getStyle(this.$els.title, 'height')) || 0;
  241 + const headerHeight = parseInt(getStyle(this.$els.header, 'height')) || 0;
  242 + const footerHeight = parseInt(getStyle(this.$els.footer, 'height')) || 0;
  243 + this.bodyHeight = this.height - titleHeight - headerHeight - footerHeight;
  244 + })
  245 + }
206 } 246 }
207 }, 247 },
  248 + compiled () {
  249 + this.showSlotHeader = this.$els.title.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
  250 + this.showSlotFooter = this.$els.footer.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
  251 + },
208 ready () { 252 ready () {
209 this.compileRender(); 253 this.compileRender();
  254 + this.fixedHeader();
210 window.addEventListener('resize', this.handleResize, false); 255 window.addEventListener('resize', this.handleResize, false);
211 }, 256 },
212 beforeDestroy () { 257 beforeDestroy () {
@@ -225,6 +270,9 @@ @@ -225,6 +270,9 @@
225 this.compileRender(true); 270 this.compileRender(true);
226 }, 271 },
227 deep: true 272 deep: true
  273 + },
  274 + height () {
  275 + this.fixedHeader();
228 } 276 }
229 } 277 }
230 } 278 }
src/styles/components/table.less
  Show/Hide comments   View file @e7e8c8f
@@ -13,6 +13,46 @@ @@ -13,6 +13,46 @@
13 box-sizing: border-box; 13 box-sizing: border-box;
14 position: relative; 14 position: relative;
15 15
  16 + &-with-header{
  17 + border-radius: @border-radius-base @border-radius-base 0 0;
  18 + }
  19 +
  20 + &-with-footer{
  21 + border: 1px solid @border-color-base;
  22 + border-radius: 0 0 @border-radius-base @border-radius-base;
  23 + }
  24 +
  25 + &-with-header&-with-footer{
  26 + border-radius: @border-radius-base;
  27 + }
  28 +
  29 + &-title, &-footer{
  30 + height: 48px;
  31 + line-height: 48px;
  32 + border-bottom: 1px solid @border-color-split;
  33 + }
  34 + &-footer{
  35 + border-bottom: none;
  36 + }
  37 +
  38 + &-body{
  39 + overflow-x: hidden;
  40 + overflow-y: auto;
  41 + position: relative;
  42 + }
  43 +
  44 + &-with-fixed-top{
  45 + border-bottom: 1px solid @border-color-base;
  46 + }
  47 + &-with-fixed-top&-with-footer{
  48 + .@{table-prefix-cls}-footer{
  49 + border-top: 1px solid @border-color-base;
  50 + }
  51 + tbody tr:last-child td{
  52 + border-bottom: none;
  53 + }
  54 + }
  55 +
16 th, td 56 th, td
17 { 57 {
18 min-width: 0; 58 min-width: 0;
@@ -96,6 +136,10 @@ @@ -96,6 +136,10 @@
96 td{ 136 td{
97 height: 60px; 137 height: 60px;
98 } 138 }
  139 + &-title, &-footer{
  140 + height: 60px;
  141 + line-height: 60px;
  142 + }
99 } 143 }
100 144
101 &-small{ 145 &-small{
@@ -105,6 +149,10 @@ @@ -105,6 +149,10 @@
105 td{ 149 td{
106 height: 40px; 150 height: 40px;
107 } 151 }
  152 + &-title, &-footer{
  153 + height: 40px;
  154 + line-height: 40px;
  155 + }
108 } 156 }
109 157
110 &-row-highlight, 158 &-row-highlight,
test/routers/table.vue
  Show/Hide comments   View file @e7e8c8f
  1 +<style>
  2 + body{
  3 + height: auto;
  4 + }
  5 +</style>
1 <template> 6 <template>
2 <div> 7 <div>
3 <!--<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>-->
4 <br> 9 <br>
5 - <i-table border :columns="columns" :data="data" @on-current-change="current" @on-select="select" @on-selection-change="schange" @on-select-all="sall"></i-table> 10 + <i-table
  11 + border
  12 + :height="height"
  13 + highlight-row
  14 + :columns="columns"
  15 + :data="data"
  16 + :row-class-name="rowClsName"
  17 + @on-current-change="current"
  18 + @on-select="select"
  19 + @on-selection-change="schange"
  20 + @on-select-all="sall">
  21 + <!--<div slot="header">表格标题</div>-->
  22 + <!--<div slot="footer">表格标题</div>-->
  23 + </i-table>
6 <br> 24 <br>
7 <!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>--> 25 <!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>-->
8 </div> 26 </div>
@@ -81,7 +99,8 @@ @@ -81,7 +99,8 @@
81 address: '北京市西城区', 99 address: '北京市西城区',
82 edit: false 100 edit: false
83 } 101 }
84 - ] 102 + ],
  103 + height: 200
85 } 104 }
86 }, 105 },
87 computed: { 106 computed: {
@@ -108,11 +127,19 @@ @@ -108,11 +127,19 @@
108 }, 127 },
109 sall (a) { 128 sall (a) {
110 console.log(a) 129 console.log(a)
  130 + },
  131 + rowClsName (row, index) {
  132 + if (index == 1) {
  133 + return 'row-success';
  134 + } else {
  135 + return '';
  136 + }
111 } 137 }
112 }, 138 },
113 ready () { 139 ready () {
114 setTimeout(() => { 140 setTimeout(() => {
115 -// return 141 +// this.height = 150;
  142 + return
116 this.data.push({ 143 this.data.push({
117 name: '刘天娇2', 144 name: '刘天娇2',
118 age: 272, 145 age: 272,