other / mew-iview

Commit b34e09b8f923917b8debb9f7d0abbe9843d6f39d

Authored by 梁灏
1 parent 57fe5562

fixed #2832

Showing 3 changed files with 136 additions and 50 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @b34e09b
  1 +<!--<template>-->
  2 + <!--<Table border :columns="columns6" :data="data5"></Table>-->
  3 +<!--</template>-->
  4 +<!--<script>-->
  5 + <!--export default {-->
  6 + <!--data () {-->
  7 + <!--return {-->
  8 + <!--columns6: [-->
  9 + <!--{-->
  10 + <!--title: 'Date',-->
  11 + <!--key: 'date'-->
  12 + <!--},-->
  13 + <!--{-->
  14 + <!--title: 'Name',-->
  15 + <!--key: 'name'-->
  16 + <!--},-->
  17 + <!--{-->
  18 + <!--title: 'Gender',-->
  19 + <!--key: 'gender'-->
  20 + <!--},-->
  21 + <!--{-->
  22 + <!--title: 'Age',-->
  23 + <!--key: 'age',-->
  24 + <!--fixed: 'left',-->
  25 +<!--// fixed: 'right',-->
  26 + <!--filters: [-->
  27 + <!--{-->
  28 + <!--label: 'Greater than 25',-->
  29 + <!--value: 1-->
  30 + <!--},-->
  31 + <!--{-->
  32 + <!--label: 'Less than 25',-->
  33 + <!--value: 2-->
  34 + <!--}-->
  35 + <!--],-->
  36 + <!--filterMultiple: false,-->
  37 + <!--filterMethod (value, row) {-->
  38 + <!--if (value === 1) {-->
  39 + <!--return row.age > 25;-->
  40 + <!--} else if (value === 2) {-->
  41 + <!--return row.age < 25;-->
  42 + <!--}-->
  43 + <!--}-->
  44 + <!--},-->
  45 + <!--{-->
  46 + <!--title: 'Address',-->
  47 + <!--key: 'address',-->
  48 + <!--fixed: 'left',-->
  49 + <!--filters: [-->
  50 + <!--{-->
  51 + <!--label: 'New York',-->
  52 + <!--value: 'New York'-->
  53 + <!--},-->
  54 + <!--{-->
  55 + <!--label: 'London',-->
  56 + <!--value: 'London'-->
  57 + <!--},-->
  58 + <!--{-->
  59 + <!--label: 'Sydney',-->
  60 + <!--value: 'Sydney'-->
  61 + <!--}-->
  62 + <!--],-->
  63 + <!--filterMethod (value, row) {-->
  64 + <!--return row.address.indexOf(value) > -1;-->
  65 + <!--}-->
  66 + <!--}-->
  67 + <!--],-->
  68 + <!--data5: [-->
  69 + <!--{-->
  70 + <!--name: 'John Brown',-->
  71 + <!--age: 18,-->
  72 + <!--gender: 'male',-->
  73 + <!--address: 'New York No. 1 Lake Park',-->
  74 + <!--date: '2016-10-03'-->
  75 + <!--},-->
  76 + <!--{-->
  77 + <!--name: 'Jim Green',-->
  78 + <!--age: 24,-->
  79 + <!--gender: 'female',-->
  80 + <!--address: 'London No. 1 Lake Park',-->
  81 + <!--date: '2016-10-01'-->
  82 + <!--},-->
  83 + <!--{-->
  84 + <!--name: 'Joe Black',-->
  85 + <!--age: 30,-->
  86 + <!--gender: 'male',-->
  87 + <!--address: 'Sydney No. 1 Lake Park',-->
  88 + <!--date: '2016-10-02'-->
  89 + <!--},-->
  90 + <!--{-->
  91 + <!--name: 'Jon Snow',-->
  92 + <!--age: 26,-->
  93 + <!--gender: 'male',-->
  94 + <!--address: 'Ottawa No. 2 Lake Park',-->
  95 + <!--date: '2016-10-04'-->
  96 + <!--}-->
  97 + <!--],-->
  98 + <!--}-->
  99 + <!--}-->
  100 + <!--}-->
  101 +<!--</script>-->
  102 +
1 103 <template>
2   - <Table border :columns="columns6" :data="data5"></Table>
  104 + <Table border :columns="columns5" :data="data5"></Table>
3 105 </template>
4 106 <script>
5 107 export default {
6 108 data () {
7 109 return {
8   - columns6: [
  110 + columns5: [
9 111 {
10 112 title: 'Date',
11   - key: 'date'
  113 + key: 'date',
  114 + sortable: true
12 115 },
13 116 {
14 117 title: 'Name',
... ... @@ -17,45 +120,12 @@
17 120 {
18 121 title: 'Age',
19 122 key: 'age',
20   - filters: [
21   - {
22   - label: 'Greater than 25',
23   - value: 1
24   - },
25   - {
26   - label: 'Less than 25',
27   - value: 2
28   - }
29   - ],
30   - filterMultiple: false,
31   - filterMethod (value, row) {
32   - if (value === 1) {
33   - return row.age > 25;
34   - } else if (value === 2) {
35   - return row.age < 25;
36   - }
37   - }
  123 + fixed: 'right',
  124 + sortable: true
38 125 },
39 126 {
40 127 title: 'Address',
41   - key: 'address',
42   - filters: [
43   - {
44   - label: 'New York',
45   - value: 'New York'
46   - },
47   - {
48   - label: 'London',
49   - value: 'London'
50   - },
51   - {
52   - label: 'Sydney',
53   - value: 'Sydney'
54   - }
55   - ],
56   - filterMethod (value, row) {
57   - return row.address.indexOf(value) > -1;
58   - }
  128 + key: 'address'
59 129 }
60 130 ],
61 131 data5: [
... ... @@ -83,7 +153,7 @@
83 153 address: 'Ottawa No. 2 Lake Park',
84 154 date: '2016-10-04'
85 155 }
86   - ],
  156 + ]
87 157 }
88 158 }
89 159 }
... ...
src/components/table/table-head.vue
  Show/Hide comments   View file @b34e09b
... ... @@ -23,7 +23,7 @@
23 23 v-if="isPopperShow(column)"
24 24 v-model="column._filterVisible"
25 25 placement="bottom"
26   - @on-popper-hide="handleFilterHide(index)">
  26 + @on-popper-hide="handleFilterHide(column._index)">
27 27 <span :class="[prefixCls + '-filter']">
28 28 <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
29 29 </span>
... ... @@ -34,19 +34,19 @@
34 34 </checkbox-group>
35 35 </div>
36 36 <div :class="[prefixCls + '-filter-footer']">
37   - <i-button type="text" size="small" :disabled="!column._filterChecked.length" @click.native="handleFilter(index)">{{ t('i.table.confirmFilter') }}</i-button>
38   - <i-button type="text" size="small" @click.native="handleReset(index)">{{ t('i.table.resetFilter') }}</i-button>
  37 + <i-button type="text" size="small" :disabled="!column._filterChecked.length" @click.native="handleFilter(column._index)">{{ t('i.table.confirmFilter') }}</i-button>
  38 + <i-button type="text" size="small" @click.native="handleReset(column._index)">{{ t('i.table.resetFilter') }}</i-button>
39 39 </div>
40 40 </div>
41 41 <div slot="content" :class="[prefixCls + '-filter-list']" v-else>
42 42 <ul :class="[prefixCls + '-filter-list-single']">
43 43 <li
44 44 :class="itemAllClasses(column)"
45   - @click="handleReset(index)">{{ t('i.table.clearFilter') }}</li>
  45 + @click="handleReset(column._index)">{{ t('i.table.clearFilter') }}</li>
46 46 <li
47 47 :class="itemClasses(column, item)"
48 48 v-for="item in column.filters"
49   - @click="handleSelect(index, item.value)">{{ item.label }}</li>
  49 + @click="handleSelect(column._index, item.value)">{{ item.label }}</li>
50 50 </ul>
51 51 </div>
52 52 </Poptip>
... ... @@ -133,10 +133,13 @@
133 133 this.$parent.selectAll(status);
134 134 },
135 135 handleSort (index, type) {
136   - if (this.columns[index]._sortType === type) {
  136 + const column = this.columns[index];
  137 + const _index = column._index;
  138 +
  139 + if (column._sortType === type) {
137 140 type = 'normal';
138 141 }
139   - this.$parent.handleSort(index, type);
  142 + this.$parent.handleSort(_index, type);
140 143 },
141 144 handleSortByHead (index) {
142 145 const column = this.columns[index];
... ...
src/components/table/table.vue
  Show/Hide comments   View file @b34e09b
... ... @@ -522,7 +522,8 @@
522 522 });
523 523 return data;
524 524 },
525   - handleSort (index, type) {
  525 + handleSort (_index, type) {
  526 + const index = this.GetOriginalIndex(_index);
526 527 this.cloneColumns.forEach((col) => col._sortType = 'normal');
527 528  
528 529 const key = this.cloneColumns[index].key;
... ... @@ -582,11 +583,23 @@
582 583 this.cloneColumns[index]._filterVisible = false;
583 584 this.$emit('on-filter-change', column);
584 585 },
585   - handleFilterSelect (index, value) {
  586 + /**
  587 + * #2832
  588 + * 应该区分当前表头的 column 是左固定还是右固定
  589 + * 否则执行到 $parent 时，方法的 index 与 cloneColumns 的 index 是不对应的
  590 + * 左固定和右固定，要区分对待
  591 + * 所以，此方法用来获取正确的 index
  592 + * */
  593 + GetOriginalIndex (_index) {
  594 + return this.cloneColumns.findIndex(item => item._index === _index);
  595 + },
  596 + handleFilterSelect (_index, value) {
  597 + const index = this.GetOriginalIndex(_index);
586 598 this.cloneColumns[index]._filterChecked = [value];
587 599 this.handleFilter(index);
588 600 },
589   - handleFilterReset (index) {
  601 + handleFilterReset (_index) {
  602 + const index = this.GetOriginalIndex(_index);
590 603 this.cloneColumns[index]._isFiltered = false;
591 604 this.cloneColumns[index]._filterVisible = false;
592 605 this.cloneColumns[index]._filterChecked = [];
... ...