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 1 <template>
2   - <div :class="[prefixCls + '-cell']">
  2 + <div :class="classes">
3 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 7 <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
5 8 </div>
6 9 </template>
7 10 <script>
  11 + import Checkbox from '../checkbox/checkbox.vue';
  12 +
8 13 export default {
  14 + components: { Checkbox },
9 15 props: {
10 16 prefixCls: String,
11 17 row: Object,
12 18 column: Object,
13   - index: Number
  19 + index: Number,
  20 + checked: Boolean
14 21 },
15 22 data () {
16 23 return {
... ... @@ -18,6 +25,16 @@
18 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 38 methods: {
22 39 compile () {
23 40 if (this.column.render) {
... ... @@ -41,11 +58,16 @@
41 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 66 compiled () {
47 67 if (this.column.type === 'index') {
48 68 this.renderType = 'index';
  69 + } else if (this.column.type === 'selection') {
  70 + this.renderType = 'selection';
49 71 } else if (this.column.render) {
50 72 this.renderType = 'render';
51 73 } else {
... ...
src/components/table/table-body.vue
  Show/Hide comments   View file @3ef4dfb
1 1 <template>
2   -
  2 + <table cellspacing="0" cellpadding="0" border="0">
  3 +
  4 + </table>
3 5 </template>
4 6 <script>
5 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 0 \ No newline at end of file
src/components/table/table-head.vue
  Show/Hide comments   View file @3ef4dfb
... ... @@ -2,7 +2,7 @@
2 2 <thead>
3 3 <tr>
4 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 6 <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
7 7 <template v-else>{{{ renderHeader(column, $index) }}}</template>
8 8 </div>
... ...
src/components/table/table.vue
  Show/Hide comments   View file @3ef4dfb
... ... @@ -13,7 +13,7 @@
13 13 :columns="cloneColumns"></thead>
14 14 </table>
15 15 </div>
16   - <div :class="[prefixCls + '-body']" :style="bodyStyle" @scroll="handleBodyScroll">
  16 + <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
17 17 <table cellspacing="0" cellpadding="0" border="0" :style="tableStyle" v-el:tbody>
18 18 <colgroup>
19 19 <col v-for="column in cloneColumns" :width="setCellWidth(column, $index)">
... ... @@ -26,26 +26,28 @@
26 26 @mouseleave.stop="handleMouseOut(index)"
27 27 @click.stop="highlightCurrentRow(index)">
28 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 35 </td>
43 36 </tr>
44 37 </tbody>
45 38 </table>
46 39 </div>
47 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 51 </div>
50 52 <div :class="[prefixCls + '-fixed-right']">
51 53  
... ... @@ -82,6 +84,9 @@
82 84 return oneOf(value, ['small', 'large']);
83 85 }
84 86 },
  87 + width: {
  88 + type: [Number, String]
  89 + },
85 90 height: {
86 91 type: [Number, String]
87 92 },
... ... @@ -141,6 +146,7 @@
141 146 styles () {
142 147 let style = {};
143 148 if (!!this.height) style.height = `${this.height}px`;
  149 + if (!!this.width) style.width = `${this.width}px`;
144 150 return style;
145 151 },
146 152 tableStyle () {
... ... @@ -277,8 +283,15 @@
277 283  
278 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 297 compiled () {
... ...
src/styles/components/table.less
  Show/Hide comments   View file @3ef4dfb
... ... @@ -10,7 +10,7 @@
10 10 border: 1px solid @border-color-base;
11 11 border-bottom: 0;
12 12 border-right: 0;
13   - border-collapse: collapse;
  13 + //border-collapse: collapse;
14 14 box-sizing: border-box;
15 15 position: relative;
16 16  
... ... @@ -130,6 +130,9 @@
130 130 word-break: break-all;
131 131 box-sizing: border-box;
132 132 }
  133 + &-hidden{
  134 + visibility: hidden;
  135 + }
133 136 th &-cell{
134 137 display: inline-block;
135 138 position: relative;
... ...
test/routers/table.vue
  Show/Hide comments   View file @3ef4dfb
... ... @@ -8,9 +8,8 @@
8 8 <!--<i-table size="large" border stripe :columns="columns" :data="data"></i-table>-->
9 9 <br>
10 10 <i-table
11   - style="width:450px"
  11 + width="450"
12 12 border
13   - highlight-row
14 13 :columns="columns"
15 14 :data="data"
16 15 :row-class-name="rowClsName"
... ... @@ -38,6 +37,10 @@
38 37 width: 50
39 38 },
40 39 {
  40 + type: 'index',
  41 + width: 50
  42 + },
  43 + {
41 44 title: '姓名',
42 45 key: 'name',
43 46 align: 'left',
... ... @@ -48,7 +51,7 @@
48 51 title: '年龄',
49 52 key: 'age',
50 53 align: 'right',
51   - fixed: 'left',
  54 +// fixed: 'left',
52 55 width: 100
53 56 // render (row) {
54 57 // return `<i-button>${row.age}</i-button>`
... ... @@ -151,7 +154,7 @@
151 154 // address: '北京市东城区2',
152 155 // edit: false
153 156 // });
154   - this.data.splice(1, 1)
  157 +// this.data.splice(1, 1)
155 158 }, 1000);
156 159 }
157 160 }
... ...