Commit b34e09b8f923917b8debb9f7d0abbe9843d6f39d
1 parent
57fe5562
fixed #2832
Showing
3 changed files
with
136 additions
and
50 deletions
Show diff stats
examples/routers/table.vue
| 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 | <template> | 103 | <template> |
| 2 | - <Table border :columns="columns6" :data="data5"></Table> | 104 | + <Table border :columns="columns5" :data="data5"></Table> |
| 3 | </template> | 105 | </template> |
| 4 | <script> | 106 | <script> |
| 5 | export default { | 107 | export default { |
| 6 | data () { | 108 | data () { |
| 7 | return { | 109 | return { |
| 8 | - columns6: [ | 110 | + columns5: [ |
| 9 | { | 111 | { |
| 10 | title: 'Date', | 112 | title: 'Date', |
| 11 | - key: 'date' | 113 | + key: 'date', |
| 114 | + sortable: true | ||
| 12 | }, | 115 | }, |
| 13 | { | 116 | { |
| 14 | title: 'Name', | 117 | title: 'Name', |
| @@ -17,45 +120,12 @@ | @@ -17,45 +120,12 @@ | ||
| 17 | { | 120 | { |
| 18 | title: 'Age', | 121 | title: 'Age', |
| 19 | key: 'age', | 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 | title: 'Address', | 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 | data5: [ | 131 | data5: [ |
| @@ -83,7 +153,7 @@ | @@ -83,7 +153,7 @@ | ||
| 83 | address: 'Ottawa No. 2 Lake Park', | 153 | address: 'Ottawa No. 2 Lake Park', |
| 84 | date: '2016-10-04' | 154 | date: '2016-10-04' |
| 85 | } | 155 | } |
| 86 | - ], | 156 | + ] |
| 87 | } | 157 | } |
| 88 | } | 158 | } |
| 89 | } | 159 | } |
src/components/table/table-head.vue
| @@ -23,7 +23,7 @@ | @@ -23,7 +23,7 @@ | ||
| 23 | v-if="isPopperShow(column)" | 23 | v-if="isPopperShow(column)" |
| 24 | v-model="column._filterVisible" | 24 | v-model="column._filterVisible" |
| 25 | placement="bottom" | 25 | placement="bottom" |
| 26 | - @on-popper-hide="handleFilterHide(index)"> | 26 | + @on-popper-hide="handleFilterHide(column._index)"> |
| 27 | <span :class="[prefixCls + '-filter']"> | 27 | <span :class="[prefixCls + '-filter']"> |
| 28 | <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i> | 28 | <i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i> |
| 29 | </span> | 29 | </span> |
| @@ -34,19 +34,19 @@ | @@ -34,19 +34,19 @@ | ||
| 34 | </checkbox-group> | 34 | </checkbox-group> |
| 35 | </div> | 35 | </div> |
| 36 | <div :class="[prefixCls + '-filter-footer']"> | 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 | </div> | 39 | </div> |
| 40 | </div> | 40 | </div> |
| 41 | <div slot="content" :class="[prefixCls + '-filter-list']" v-else> | 41 | <div slot="content" :class="[prefixCls + '-filter-list']" v-else> |
| 42 | <ul :class="[prefixCls + '-filter-list-single']"> | 42 | <ul :class="[prefixCls + '-filter-list-single']"> |
| 43 | <li | 43 | <li |
| 44 | :class="itemAllClasses(column)" | 44 | :class="itemAllClasses(column)" |
| 45 | - @click="handleReset(index)">{{ t('i.table.clearFilter') }}</li> | 45 | + @click="handleReset(column._index)">{{ t('i.table.clearFilter') }}</li> |
| 46 | <li | 46 | <li |
| 47 | :class="itemClasses(column, item)" | 47 | :class="itemClasses(column, item)" |
| 48 | v-for="item in column.filters" | 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 | </ul> | 50 | </ul> |
| 51 | </div> | 51 | </div> |
| 52 | </Poptip> | 52 | </Poptip> |
| @@ -133,10 +133,13 @@ | @@ -133,10 +133,13 @@ | ||
| 133 | this.$parent.selectAll(status); | 133 | this.$parent.selectAll(status); |
| 134 | }, | 134 | }, |
| 135 | handleSort (index, type) { | 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 | type = 'normal'; | 140 | type = 'normal'; |
| 138 | } | 141 | } |
| 139 | - this.$parent.handleSort(index, type); | 142 | + this.$parent.handleSort(_index, type); |
| 140 | }, | 143 | }, |
| 141 | handleSortByHead (index) { | 144 | handleSortByHead (index) { |
| 142 | const column = this.columns[index]; | 145 | const column = this.columns[index]; |
src/components/table/table.vue
| @@ -522,7 +522,8 @@ | @@ -522,7 +522,8 @@ | ||
| 522 | }); | 522 | }); |
| 523 | return data; | 523 | return data; |
| 524 | }, | 524 | }, |
| 525 | - handleSort (index, type) { | 525 | + handleSort (_index, type) { |
| 526 | + const index = this.GetOriginalIndex(_index); | ||
| 526 | this.cloneColumns.forEach((col) => col._sortType = 'normal'); | 527 | this.cloneColumns.forEach((col) => col._sortType = 'normal'); |
| 527 | 528 | ||
| 528 | const key = this.cloneColumns[index].key; | 529 | const key = this.cloneColumns[index].key; |
| @@ -582,11 +583,23 @@ | @@ -582,11 +583,23 @@ | ||
| 582 | this.cloneColumns[index]._filterVisible = false; | 583 | this.cloneColumns[index]._filterVisible = false; |
| 583 | this.$emit('on-filter-change', column); | 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 | this.cloneColumns[index]._filterChecked = [value]; | 598 | this.cloneColumns[index]._filterChecked = [value]; |
| 587 | this.handleFilter(index); | 599 | this.handleFilter(index); |
| 588 | }, | 600 | }, |
| 589 | - handleFilterReset (index) { | 601 | + handleFilterReset (_index) { |
| 602 | + const index = this.GetOriginalIndex(_index); | ||
| 590 | this.cloneColumns[index]._isFiltered = false; | 603 | this.cloneColumns[index]._isFiltered = false; |
| 591 | this.cloneColumns[index]._filterVisible = false; | 604 | this.cloneColumns[index]._filterVisible = false; |
| 592 | this.cloneColumns[index]._filterChecked = []; | 605 | this.cloneColumns[index]._filterChecked = []; |