chenhaodong / mew-iview

Commit 3ef4dfb9ef0717e104bb0390fc6d81f4049ba069

Authored by 梁灏
1 parent 192e2cb8

update Table 

update Table
Showing 7 changed files with 68 additions and 46 deletions   Show diff stats
Inline Side-by-side
src/components/table/cell.vue
  Show/Hide comments   View file @3ef4dfb
1 <template> 1 <template>
2 - <div :class="[prefixCls + '-cell']"> 2 + <div :class="classes">
3 <template v-if="renderType === 'index'">{{index + 1}}</template> 3 <template v-if="renderType === 'index'">{{index + 1}}</template>
  4 + <template v-if="renderType === 'selection'">
  5 + <Checkbox :checked="checked" @on-change="toggleSelect(index)"></Checkbox>
  6 + </template>
4 <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template> 7 <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
5 </div> 8 </div>
6 </template> 9 </template>
7 <script> 10 <script>
  11 + import Checkbox from '../checkbox/checkbox.vue';
  12 +
8 export default { 13 export default {
  14 + components: { Checkbox },
9 props: { 15 props: {
10 prefixCls: String, 16 prefixCls: String,
11 row: Object, 17 row: Object,
12 column: Object, 18 column: Object,
13 - index: Number 19 + index: Number,
  20 + checked: Boolean
14 }, 21 },
15 data () { 22 data () {
16 return { 23 return {
@@ -18,6 +25,16 @@ @@ -18,6 +25,16 @@
18 uid: -1 25 uid: -1
19 } 26 }
20 }, 27 },
  28 + computed: {
  29 + classes () {
  30 + return [
  31 + `${this.prefixCls}-cell`,
  32 + {
  33 + [`${this.prefixCls}-hidden`]: this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right')
  34 + }
  35 + ]
  36 + }
  37 + },
21 methods: { 38 methods: {
22 compile () { 39 compile () {
23 if (this.column.render) { 40 if (this.column.render) {
@@ -41,11 +58,16 @@ @@ -41,11 +58,16 @@
41 this.$parent.$parent.$children[i].$destroy(); 58 this.$parent.$parent.$children[i].$destroy();
42 } 59 }
43 } 60 }
  61 + },
  62 + toggleSelect (index) {
  63 + this.$parent.toggleSelect(index);
44 } 64 }
45 }, 65 },
46 compiled () { 66 compiled () {
47 if (this.column.type === 'index') { 67 if (this.column.type === 'index') {
48 this.renderType = 'index'; 68 this.renderType = 'index';
  69 + } else if (this.column.type === 'selection') {
  70 + this.renderType = 'selection';
49 } else if (this.column.render) { 71 } else if (this.column.render) {
50 this.renderType = 'render'; 72 this.renderType = 'render';
51 } else { 73 } else {
src/components/table/table-body.vue
  Show/Hide comments   View file @3ef4dfb
1 <template> 1 <template>
2 - 2 + <table cellspacing="0" cellpadding="0" border="0">
  3 +
  4 + </table>
3 </template> 5 </template>
4 <script> 6 <script>
5 export default { 7 export default {
src/components/table/table-column.vue deleted
View file @192e2cb
1 -<template>  
2 -  
3 -</template>  
4 -<script>  
5 - export default {  
6 - props: {  
7 -  
8 - },  
9 - data () {  
10 - return {  
11 -  
12 - }  
13 - },  
14 - computed: {  
15 -  
16 - },  
17 - methods: {  
18 -  
19 - }  
20 - }  
21 -</script>  
22 \ No newline at end of file 0 \ No newline at end of file
src/components/table/table-head.vue
  Show/Hide comments   View file @3ef4dfb
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <thead> 2 <thead>
3 <tr> 3 <tr>
4 <th v-for="column in columns" :class="alignCls(column)"> 4 <th v-for="column in columns" :class="alignCls(column)">
5 - <div :class="[prefixCls + '-cell']"> 5 + <div :class="[prefixCls + '-cell', {[prefixCls + '-hidden']: column.fixed && (column.fixed === 'left' || column.fixed === 'right')}]">
6 <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template> 6 <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
7 <template v-else>{{{ renderHeader(column, $index) }}}</template> 7 <template v-else>{{{ renderHeader(column, $index) }}}</template>
8 </div> 8 </div>
src/components/table/table.vue
  Show/Hide comments   View file @3ef4dfb
@@ -13,7 +13,7 @@ @@ -13,7 +13,7 @@
13 :columns="cloneColumns"></thead> 13 :columns="cloneColumns"></thead>
14 </table> 14 </table>
15 </div> 15 </div>
16 - <div :class="[prefixCls + '-body']" :style="bodyStyle" @scroll="handleBodyScroll"> 16 + <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
17 <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>
18 <colgroup> 18 <colgroup>
19 <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)"> 19 <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)">
@@ -26,26 +26,28 @@ @@ -26,26 +26,28 @@
26 @mouseleave.stop="handleMouseOut(index)" 26 @mouseleave.stop="handleMouseOut(index)"
27 @click.stop="highlightCurrentRow(index)"> 27 @click.stop="highlightCurrentRow(index)">
28 <td v-for="column in cloneColumns" :class="alignCls(column)"> 28 <td v-for="column in cloneColumns" :class="alignCls(column)">
29 - <div :class="[prefixCls + '-cell']" v-if="column.type === 'selection'">  
30 - <Checkbox :checked="cloneData[index] && cloneData[index]._isChecked" @on-change="toggleSelect(index)"></Checkbox>  
31 - </div>  
32 - <Cell v-else :prefix-cls="prefixCls" :row="row" :column="column" :index="index"></Cell>  
33 - <!--<div :class="[prefixCls + '-cell']" v-else>-->  
34 - <!--{{{ renderRow(row, column, index) }}}-->  
35 - <!--</div>-->  
36 - <!--<div :class="[prefixCls + '-cell']">-->  
37 - <!--<template v-if="column.type === 'selection'">-->  
38 - <!--<Checkbox :checked="cloneData[index] && cloneData[index]._isChecked" @on-change="toggleSelect(index)"></Checkbox>-->  
39 - <!--</template>-->  
40 - <!--<template v-else>{{{ renderRow(row, column, index) }}}</template>-->  
41 - <!--</div>--> 29 + <Cell
  30 + :prefix-cls="prefixCls"
  31 + :row="row"
  32 + :column="column"
  33 + :index="index"
  34 + :checked="cloneData[index] && cloneData[index]._isChecked"></Cell>
42 </td> 35 </td>
43 </tr> 36 </tr>
44 </tbody> 37 </tbody>
45 </table> 38 </table>
46 </div> 39 </div>
47 <div :class="[prefixCls + '-fixed']"> 40 <div :class="[prefixCls + '-fixed']">
  41 + <table cellspacing="0" cellpadding="0" border="0">
  42 + <colgroup>
  43 + <col v-for="column in leftFixedColumns" :width="setCellWidth(column, $index)">
  44 + </colgroup>
  45 + <tbody :class="[prefixCls + '-tbody']">
  46 + <tr>
48 47
  48 + </tr>
  49 + </tbody>
  50 + </table>
49 </div> 51 </div>
50 <div :class="[prefixCls + '-fixed-right']"> 52 <div :class="[prefixCls + '-fixed-right']">
51 53
@@ -82,6 +84,9 @@ @@ -82,6 +84,9 @@
82 return oneOf(value, ['small', 'large']); 84 return oneOf(value, ['small', 'large']);
83 } 85 }
84 }, 86 },
  87 + width: {
  88 + type: [Number, String]
  89 + },
85 height: { 90 height: {
86 type: [Number, String] 91 type: [Number, String]
87 }, 92 },
@@ -141,6 +146,7 @@ @@ -141,6 +146,7 @@
141 styles () { 146 styles () {
142 let style = {}; 147 let style = {};
143 if (!!this.height) style.height = `${this.height}px`; 148 if (!!this.height) style.height = `${this.height}px`;
  149 + if (!!this.width) style.width = `${this.width}px`;
144 return style; 150 return style;
145 }, 151 },
146 tableStyle () { 152 tableStyle () {
@@ -277,8 +283,15 @@ @@ -277,8 +283,15 @@
277 283
278 // todo 固定时上下滚动，固定的表头也滚动 scrollTop 284 // todo 固定时上下滚动，固定的表头也滚动 scrollTop
279 }, 285 },
280 - handleMouseWheel () {  
281 - console.log(111) 286 + handleMouseWheel (event) {
  287 + const deltaX = event.deltaX;
  288 + const $body = this.$els.body;
  289 +
  290 + if (deltaX > 0) {
  291 + $body.scrollLeft = $body.scrollLeft + 10;
  292 + } else {
  293 + $body.scrollLeft = $body.scrollLeft - 10;
  294 + }
282 } 295 }
283 }, 296 },
284 compiled () { 297 compiled () {
src/styles/components/table.less
  Show/Hide comments   View file @3ef4dfb
@@ -10,7 +10,7 @@ @@ -10,7 +10,7 @@
10 border: 1px solid @border-color-base; 10 border: 1px solid @border-color-base;
11 border-bottom: 0; 11 border-bottom: 0;
12 border-right: 0; 12 border-right: 0;
13 - border-collapse: collapse; 13 + //border-collapse: collapse;
14 box-sizing: border-box; 14 box-sizing: border-box;
15 position: relative; 15 position: relative;
16 16
@@ -130,6 +130,9 @@ @@ -130,6 +130,9 @@
130 word-break: break-all; 130 word-break: break-all;
131 box-sizing: border-box; 131 box-sizing: border-box;
132 } 132 }
  133 + &-hidden{
  134 + visibility: hidden;
  135 + }
133 th &-cell{ 136 th &-cell{
134 display: inline-block; 137 display: inline-block;
135 position: relative; 138 position: relative;
test/routers/table.vue
  Show/Hide comments   View file @3ef4dfb
@@ -8,9 +8,8 @@ @@ -8,9 +8,8 @@
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 - style="width:450px" 11 + width="450"
12 border 12 border
13 - highlight-row  
14 :columns="columns" 13 :columns="columns"
15 :data="data" 14 :data="data"
16 :row-class-name="rowClsName" 15 :row-class-name="rowClsName"
@@ -38,6 +37,10 @@ @@ -38,6 +37,10 @@
38 width: 50 37 width: 50
39 }, 38 },
40 { 39 {
  40 + type: 'index',
  41 + width: 50
  42 + },
  43 + {
41 title: '姓名', 44 title: '姓名',
42 key: 'name', 45 key: 'name',
43 align: 'left', 46 align: 'left',
@@ -48,7 +51,7 @@ @@ -48,7 +51,7 @@
48 title: '年龄', 51 title: '年龄',
49 key: 'age', 52 key: 'age',
50 align: 'right', 53 align: 'right',
51 - fixed: 'left', 54 +// fixed: 'left',
52 width: 100 55 width: 100
53 // render (row) { 56 // render (row) {
54 // return `<i-button>${row.age}</i-button>` 57 // return `<i-button>${row.age}</i-button>`
@@ -151,7 +154,7 @@ @@ -151,7 +154,7 @@
151 // address: '北京市东城区2', 154 // address: '北京市东城区2',
152 // edit: false 155 // edit: false
153 // }); 156 // });
154 - this.data.splice(1, 1) 157 +// this.data.splice(1, 1)
155 }, 1000); 158 }, 1000);
156 } 159 }
157 } 160 }