other / 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 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 5 <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle">
5 6 <colgroup>
6 7 <col v-for="column in columns" :width="setCellWidth(column, $index)">
... ... @@ -12,7 +13,7 @@
12 13 :columns="columns"></thead>
13 14 </table>
14 15 </div>
15   - <div :class="[prefixCls + '-body']">
  16 + <div :class="[prefixCls + '-body']" :style="bodyStyle">
16 17 <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
17 18 <colgroup>
18 19 <col v-for="column in columns" :width="setCellWidth(column, $index)">
... ... @@ -20,7 +21,7 @@
20 21 <tbody :class="[prefixCls + '-tbody']" v-el:render>
21 22 <tr
22 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 25 @click.stop="highlightCurrentRow(index)">
25 26 <td v-for="column in columns" :class="alignCls(column)">
26 27 <div :class="[prefixCls + '-cell']">
... ... @@ -34,6 +35,7 @@
34 35 </tbody>
35 36 </table>
36 37 </div>
  38 + <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
37 39 </div>
38 40 </template>
39 41 <script>
... ... @@ -64,6 +66,9 @@
64 66 return oneOf(value, ['small', 'large']);
65 67 }
66 68 },
  69 + height: {
  70 + type: [Number, String]
  71 + },
67 72 stripe: {
68 73 type: Boolean,
69 74 default: false
... ... @@ -79,6 +84,12 @@
79 84 highlightRow: {
80 85 type: Boolean,
81 86 default: false
  87 + },
  88 + rowClassName: {
  89 + type: Function,
  90 + default () {
  91 + return '';
  92 + }
82 93 }
83 94 },
84 95 data () {
... ... @@ -87,7 +98,10 @@
87 98 columnsWidth: [],
88 99 prefixCls: prefixCls,
89 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 107 computed: {
... ... @@ -97,17 +111,33 @@
97 111 {
98 112 [`${prefixCls}-${this.size}`]: !!this.size,
99 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 126 tableStyle () {
105 127 let style = {};
106 128 if (this.tableWidth !== 0) style.width = `${this.tableWidth}px`;
107 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 137 methods: {
  138 + rowClsName (index) {
  139 + return this.rowClassName(this.data[index], index);
  140 + },
111 141 renderRow (row, column, index) {
112 142 return column.type === 'index' ? index + 1 : column.render ? '' : row[column.key];
113 143 },
... ... @@ -203,10 +233,25 @@
203 233 },
204 234 selectAll () {
205 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 252 ready () {
209 253 this.compileRender();
  254 + this.fixedHeader();
210 255 window.addEventListener('resize', this.handleResize, false);
211 256 },
212 257 beforeDestroy () {
... ... @@ -225,6 +270,9 @@
225 270 this.compileRender(true);
226 271 },
227 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 13 box-sizing: border-box;
14 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 56 th, td
17 57 {
18 58 min-width: 0;
... ... @@ -96,6 +136,10 @@
96 136 td{
97 137 height: 60px;
98 138 }
  139 + &-title, &-footer{
  140 + height: 60px;
  141 + line-height: 60px;
  142 + }
99 143 }
100 144  
101 145 &-small{
... ... @@ -105,6 +149,10 @@
105 149 td{
106 150 height: 40px;
107 151 }
  152 + &-title, &-footer{
  153 + height: 40px;
  154 + line-height: 40px;
  155 + }
108 156 }
109 157  
110 158 &-row-highlight,
... ...
test/routers/table.vue
  Show/Hide comments   View file @e7e8c8f
  1 +<style>
  2 + body{
  3 + height: auto;
  4 + }
  5 +</style>
1 6 <template>
2 7 <div>
3 8 <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
4 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 24 <br>
7 25 <!--<i-table size="small" border stripe :columns="columns" :data="data"></i-table>-->
8 26 </div>
... ... @@ -81,7 +99,8 @@
81 99 address: '北京市西城区',
82 100 edit: false
83 101 }
84   - ]
  102 + ],
  103 + height: 200
85 104 }
86 105 },
87 106 computed: {
... ... @@ -108,11 +127,19 @@
108 127 },
109 128 sall (a) {
110 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 139 ready () {
114 140 setTimeout(() => {
115   -// return
  141 +// this.height = 150;
  142 + return
116 143 this.data.push({
117 144 name: '刘天娇2',
118 145 age: 272,
... ...