chenhaodong / mew-iview

Commit 45e7ed7ef56c7a10772419760c5d641185778f71

Authored by 梁灏
1 parent adaeca88

update Table 

update Table
Showing 4 changed files with 109 additions and 71 deletions   Show diff stats
Inline Side-by-side
src/components/table/table-head.vue
  Show/Hide comments   View file @45e7ed7
... ... @@ -5,7 +5,7 @@
5 5 </colgroup>
6 6 <thead>
7 7 <tr>
8   - <th v-for="column in columns" :class="alignCls(column)">
  8 + <th v-for="(index, column) in columns" :class="alignCls(column)">
9 9 <div :class="cellClasses(column)">
10 10 <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
11 11 <template v-else>
... ... @@ -35,8 +35,13 @@
35 35 </div>
36 36 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
37 37 <ul>
38   - <li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.lengtg}]">全部</li>
39   - <li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]" v-for="item in column.filters">{{ item.label }}</li>
  38 + <li
  39 + :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.length}]"
  40 + @click="handleReset($index)">全部</li>
  41 + <li
  42 + :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]"
  43 + v-for="item in column.filters"
  44 + @click="handleSelect(index, item.value)">{{ item.label }}</li>
40 45 </ul>
41 46 </div>
42 47 </Poptip>
... ... @@ -107,6 +112,9 @@
107 112 handleFilter (index) {
108 113 this.$parent.handleFilter(index);
109 114 },
  115 + handleSelect (index, value) {
  116 + this.$parent.handleFilterSelect(index, value);
  117 + },
110 118 handleReset (index) {
111 119 this.$parent.handleFilterReset(index);
112 120 },
... ...
src/components/table/table.vue
  Show/Hide comments   View file @45e7ed7
1 1 <template>
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 @mousewheel="handleMouseWheel">
5   - <table-head
6   - :prefix-cls="prefixCls"
7   - :style="tableStyle"
8   - :columns="cloneColumns"
9   - :obj-data="objData"></table-head>
10   - </div>
11   - <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
12   - <table-body
13   - v-ref:tbody
14   - :prefix-cls="prefixCls"
15   - :style="tableStyle"
16   - :columns="cloneColumns"
17   - :data="rebuildData"
18   - :obj-data="objData"></table-body>
19   - </div>
20   - <div :class="[prefixCls + '-fixed']">
21   - <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  2 + <div :class="wrapClasses" :style="styles">
  3 + <div :class="classes" :style="styles">
  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">
22 6 <table-head
23   - fixed
24   - :prefix-cls="prefixCls"
25   - :style="fixedTableStyle"
26   - :columns="leftFixedColumns"
27   - :obj-data="objData"></table-head>
  7 + :prefix-cls="prefixCls"
  8 + :style="tableStyle"
  9 + :columns="cloneColumns"
  10 + :obj-data="objData"></table-head>
28 11 </div>
29   - <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
  12 + <div :class="[prefixCls + '-body']" :style="bodyStyle" v-el:body @scroll="handleBodyScroll">
30 13 <table-body
31   - fixed
32   - :prefix-cls="prefixCls"
33   - :style="fixedTableStyle"
34   - :columns="leftFixedColumns"
35   - :data="rebuildData"
36   - :obj-data="objData"></table-body>
  14 + v-ref:tbody
  15 + :prefix-cls="prefixCls"
  16 + :style="tableStyle"
  17 + :columns="cloneColumns"
  18 + :data="rebuildData"
  19 + :obj-data="objData"></table-body>
37 20 </div>
38   - </div>
39   - <div :class="[prefixCls + '-fixed-right']">
40   - <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
41   - <table-head
42   - fixed
43   - :prefix-cls="prefixCls"
44   - :style="fixedRightTableStyle"
45   - :columns="rightFixedColumns"
46   - :obj-data="objData"></table-head>
  21 + <div :class="[prefixCls + '-fixed']">
  22 + <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  23 + <table-head
  24 + fixed
  25 + :prefix-cls="prefixCls"
  26 + :style="fixedTableStyle"
  27 + :columns="leftFixedColumns"
  28 + :obj-data="objData"></table-head>
  29 + </div>
  30 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-body>
  31 + <table-body
  32 + fixed
  33 + :prefix-cls="prefixCls"
  34 + :style="fixedTableStyle"
  35 + :columns="leftFixedColumns"
  36 + :data="rebuildData"
  37 + :obj-data="objData"></table-body>
  38 + </div>
47 39 </div>
48   - <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
49   - <table-body
50   - fixed
51   - :prefix-cls="prefixCls"
52   - :style="fixedRightTableStyle"
53   - :columns="rightFixedColumns"
54   - :data="rebuildData"
55   - :obj-data="objData"></table-body>
  40 + <div :class="[prefixCls + '-fixed-right']">
  41 + <div :class="[prefixCls + '-fixed-header']" v-if="showHeader">
  42 + <table-head
  43 + fixed
  44 + :prefix-cls="prefixCls"
  45 + :style="fixedRightTableStyle"
  46 + :columns="rightFixedColumns"
  47 + :obj-data="objData"></table-head>
  48 + </div>
  49 + <div :class="[prefixCls + '-fixed-body']" :style="fixedBodyStyle" v-el:fixed-right-body>
  50 + <table-body
  51 + fixed
  52 + :prefix-cls="prefixCls"
  53 + :style="fixedRightTableStyle"
  54 + :columns="rightFixedColumns"
  55 + :data="rebuildData"
  56 + :obj-data="objData"></table-body>
  57 + </div>
56 58 </div>
  59 + <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
57 60 </div>
58   - <div :class="[prefixCls + '-footer']" v-if="showSlotFooter" v-el:footer><slot name="footer"></slot></div>
59 61 </div>
60 62 </template>
61 63 <script>
... ... @@ -129,11 +131,18 @@
129 131 }
130 132 },
131 133 computed: {
  134 + wrapClasses () {
  135 + return [
  136 + `${prefixCls}-wrapper`,
  137 + {
  138 + [`${prefixCls}-hide`]: !this.ready
  139 + }
  140 + ]
  141 + },
132 142 classes () {
133 143 return [
134 144 `${prefixCls}`,
135 145 {
136   - [`${prefixCls}-hide`]: !this.ready,
137 146 [`${prefixCls}-${this.size}`]: !!this.size,
138 147 [`${prefixCls}-border`]: this.border,
139 148 [`${prefixCls}-stripe`]: this.stripe,
... ... @@ -364,8 +373,15 @@
364 373 this.cloneColumns[index]._isFiltered = true;
365 374 this.cloneColumns[index]._filterVisible = false;
366 375 },
  376 + handleFilterSelect (index, value) {
  377 + this.cloneColumns[index]._filterChecked = [value];
  378 + this.handleFilter(index);
  379 + },
367 380 handleFilterReset (index) {
368 381 this.cloneColumns[index]._isFiltered = false;
  382 + this.cloneColumns[index]._filterVisible = false;
  383 + this.cloneColumns[index]._filterChecked = [];
  384 + this.rebuildData = this.makeData();
369 385 },
370 386 makeData () {
371 387 let data = deepCopy(this.data);
... ...
src/styles/components/table.less
  Show/Hide comments   View file @45e7ed7
... ... @@ -2,17 +2,21 @@
2 2 @table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
3 3  
4 4 .@{table-prefix-cls} {
  5 + &-wrapper{
  6 + position: relative;
  7 + border: 1px solid @border-color-base;
  8 + border-bottom: 0;
  9 + border-right: 0;
  10 + }
5 11 width: 100%;
6 12 max-width: 100%;
7 13 overflow: hidden;
8 14 color: @text-color;
9 15 font-size: @font-size-small;
10 16 background-color: #fff;
11   - border: 1px solid @border-color-base;
12   - border-bottom: 0;
13   - border-right: 0;
  17 +
14 18 box-sizing: border-box;
15   - position: relative;
  19 + //position: relative;
16 20  
17 21 &-hide{
18 22 opacity: 0;
... ... @@ -202,7 +206,6 @@
202 206 top: 0;
203 207 left: 0;
204 208 box-shadow: @shadow-right;
205   - //overflow-x: hidden;
206 209  
207 210 &::before {
208 211 content: '';
... ...
test/routers/table.vue
  Show/Hide comments   View file @45e7ed7
... ... @@ -9,7 +9,6 @@
9 9 <br>
10 10 <i-table
11 11 width="450"
12   - :height="height"
13 12 stripe
14 13 border
15 14 highlight-row
... ... @@ -40,6 +39,7 @@
40 39 {
41 40 type: 'selection',
42 41 width: 50,
  42 + fixed: 'left',
43 43 align: 'center'
44 44 },
45 45 {
... ... @@ -55,15 +55,22 @@
55 55 width: 100,
56 56 filters: [
57 57 {
58   - label: '家',
59   - value: 'home'
  58 + label: '大于25岁',
  59 + value: 1
60 60 },
61 61 {
62   - label: '公司',
63   - value: 'company'
  62 + label: '小于25岁',
  63 + value: 2
64 64 }
65 65 ],
66   - filterMultiple: false
  66 + filterMultiple: false,
  67 + filterMethod (value, row) {
  68 + if (value === 1) {
  69 + return row.age >= 25;
  70 + } else if (value === 2) {
  71 + return row.age < 25;
  72 + }
  73 + }
67 74 },
68 75 {
69 76 title: '标签',
... ... @@ -128,8 +135,8 @@
128 135 fixed: 'right',
129 136 width: 120,
130 137 render (row, column, index) {
131   - return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`
132   -// return `<a>${row.name}</a>`
  138 + return `<i-button @click="edit(${index})">${row.name}${index}</i-button>`;
  139 + return `<a>${row.name}</a>`;
133 140 }
134 141 }
135 142 ],
... ... @@ -139,28 +146,32 @@
139 146 age: 25,
140 147 address: '北京市朝阳区',
141 148 edit: false,
142   - tag: 'home'
  149 + tag: 'home',
  150 + action: 1
143 151 },
144 152 {
145 153 name: '段模',
146 154 age: 21,
147 155 address: '北京市海淀区',
148 156 edit: false,
149   - tag: 'company'
  157 + tag: 'company',
  158 + action: 2
150 159 },
151 160 {
152 161 name: '刘天娇',
153 162 age: 27,
154 163 address: '北京市东城区',
155 164 edit: false,
156   - tag: 'company'
  165 + tag: 'company',
  166 + action: 3
157 167 },
158 168 {
159 169 name: '胡国伟',
160 170 age: 22,
161 171 address: '北京市西城区',
162 172 edit: false,
163   - tag: 'home'
  173 + tag: 'home',
  174 + action: 4
164 175 }
165 176 ],
166 177 height: 200
... ...