fixed #2832
This commit is contained in:
梁灏
parent
57fe55624e
commit
b34e09b8f9
3 changed files with 136 additions and 50 deletions
|
|
@ -1,14 +1,117 @@
|
|||
<!--<template>-->
|
||||
<!--<Table border :columns="columns6" :data="data5"></Table>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--columns6: [-->
|
||||
<!--{-->
|
||||
<!--title: 'Date',-->
|
||||
<!--key: 'date'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--title: 'Name',-->
|
||||
<!--key: 'name'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--title: 'Gender',-->
|
||||
<!--key: 'gender'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--title: 'Age',-->
|
||||
<!--key: 'age',-->
|
||||
<!--fixed: 'left',-->
|
||||
<!--// fixed: 'right',-->
|
||||
<!--filters: [-->
|
||||
<!--{-->
|
||||
<!--label: 'Greater than 25',-->
|
||||
<!--value: 1-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--label: 'Less than 25',-->
|
||||
<!--value: 2-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--filterMultiple: false,-->
|
||||
<!--filterMethod (value, row) {-->
|
||||
<!--if (value === 1) {-->
|
||||
<!--return row.age > 25;-->
|
||||
<!--} else if (value === 2) {-->
|
||||
<!--return row.age < 25;-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--title: 'Address',-->
|
||||
<!--key: 'address',-->
|
||||
<!--fixed: 'left',-->
|
||||
<!--filters: [-->
|
||||
<!--{-->
|
||||
<!--label: 'New York',-->
|
||||
<!--value: 'New York'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--label: 'London',-->
|
||||
<!--value: 'London'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--label: 'Sydney',-->
|
||||
<!--value: 'Sydney'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--filterMethod (value, row) {-->
|
||||
<!--return row.address.indexOf(value) > -1;-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--data5: [-->
|
||||
<!--{-->
|
||||
<!--name: 'John Brown',-->
|
||||
<!--age: 18,-->
|
||||
<!--gender: 'male',-->
|
||||
<!--address: 'New York No. 1 Lake Park',-->
|
||||
<!--date: '2016-10-03'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--name: 'Jim Green',-->
|
||||
<!--age: 24,-->
|
||||
<!--gender: 'female',-->
|
||||
<!--address: 'London No. 1 Lake Park',-->
|
||||
<!--date: '2016-10-01'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--name: 'Joe Black',-->
|
||||
<!--age: 30,-->
|
||||
<!--gender: 'male',-->
|
||||
<!--address: 'Sydney No. 1 Lake Park',-->
|
||||
<!--date: '2016-10-02'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--name: 'Jon Snow',-->
|
||||
<!--age: 26,-->
|
||||
<!--gender: 'male',-->
|
||||
<!--address: 'Ottawa No. 2 Lake Park',-->
|
||||
<!--date: '2016-10-04'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<template>
|
||||
<Table border :columns="columns6" :data="data5"></Table>
|
||||
<Table border :columns="columns5" :data="data5"></Table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns6: [
|
||||
columns5: [
|
||||
{
|
||||
title: 'Date',
|
||||
key: 'date'
|
||||
key: 'date',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
|
|
@ -17,45 +120,12 @@
|
|||
{
|
||||
title: 'Age',
|
||||
key: 'age',
|
||||
filters: [
|
||||
{
|
||||
label: 'Greater than 25',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'Less than 25',
|
||||
value: 2
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod (value, row) {
|
||||
if (value === 1) {
|
||||
return row.age > 25;
|
||||
} else if (value === 2) {
|
||||
return row.age < 25;
|
||||
}
|
||||
}
|
||||
fixed: 'right',
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
key: 'address',
|
||||
filters: [
|
||||
{
|
||||
label: 'New York',
|
||||
value: 'New York'
|
||||
},
|
||||
{
|
||||
label: 'London',
|
||||
value: 'London'
|
||||
},
|
||||
{
|
||||
label: 'Sydney',
|
||||
value: 'Sydney'
|
||||
}
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.address.indexOf(value) > -1;
|
||||
}
|
||||
key: 'address'
|
||||
}
|
||||
],
|
||||
data5: [
|
||||
|
|
@ -83,7 +153,7 @@
|
|||
address: 'Ottawa No. 2 Lake Park',
|
||||
date: '2016-10-04'
|
||||
}
|
||||
],
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
v-if="isPopperShow(column)"
|
||||
v-model="column._filterVisible"
|
||||
placement="bottom"
|
||||
@on-popper-hide="handleFilterHide(index)">
|
||||
@on-popper-hide="handleFilterHide(column._index)">
|
||||
<span :class="[prefixCls + '-filter']">
|
||||
<i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
|
||||
</span>
|
||||
|
|
@ -34,19 +34,19 @@
|
|||
</checkbox-group>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-filter-footer']">
|
||||
<i-button type="text" size="small" :disabled="!column._filterChecked.length" @click.native="handleFilter(index)">{{ t('i.table.confirmFilter') }}</i-button>
|
||||
<i-button type="text" size="small" @click.native="handleReset(index)">{{ t('i.table.resetFilter') }}</i-button>
|
||||
<i-button type="text" size="small" :disabled="!column._filterChecked.length" @click.native="handleFilter(column._index)">{{ t('i.table.confirmFilter') }}</i-button>
|
||||
<i-button type="text" size="small" @click.native="handleReset(column._index)">{{ t('i.table.resetFilter') }}</i-button>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
|
||||
<ul :class="[prefixCls + '-filter-list-single']">
|
||||
<li
|
||||
:class="itemAllClasses(column)"
|
||||
@click="handleReset(index)">{{ t('i.table.clearFilter') }}</li>
|
||||
@click="handleReset(column._index)">{{ t('i.table.clearFilter') }}</li>
|
||||
<li
|
||||
:class="itemClasses(column, item)"
|
||||
v-for="item in column.filters"
|
||||
@click="handleSelect(index, item.value)">{{ item.label }}</li>
|
||||
@click="handleSelect(column._index, item.value)">{{ item.label }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Poptip>
|
||||
|
|
@ -133,10 +133,13 @@
|
|||
this.$parent.selectAll(status);
|
||||
},
|
||||
handleSort (index, type) {
|
||||
if (this.columns[index]._sortType === type) {
|
||||
const column = this.columns[index];
|
||||
const _index = column._index;
|
||||
|
||||
if (column._sortType === type) {
|
||||
type = 'normal';
|
||||
}
|
||||
this.$parent.handleSort(index, type);
|
||||
this.$parent.handleSort(_index, type);
|
||||
},
|
||||
handleSortByHead (index) {
|
||||
const column = this.columns[index];
|
||||
|
|
|
|||
|
|
@ -522,7 +522,8 @@
|
|||
});
|
||||
return data;
|
||||
},
|
||||
handleSort (index, type) {
|
||||
handleSort (_index, type) {
|
||||
const index = this.GetOriginalIndex(_index);
|
||||
this.cloneColumns.forEach((col) => col._sortType = 'normal');
|
||||
|
||||
const key = this.cloneColumns[index].key;
|
||||
|
|
@ -582,11 +583,23 @@
|
|||
this.cloneColumns[index]._filterVisible = false;
|
||||
this.$emit('on-filter-change', column);
|
||||
},
|
||||
handleFilterSelect (index, value) {
|
||||
/**
|
||||
* #2832
|
||||
* 应该区分当前表头的 column 是左固定还是右固定
|
||||
* 否则执行到 $parent 时，方法的 index 与 cloneColumns 的 index 是不对应的
|
||||
* 左固定和右固定，要区分对待
|
||||
* 所以，此方法用来获取正确的 index
|
||||
* */
|
||||
GetOriginalIndex (_index) {
|
||||
return this.cloneColumns.findIndex(item => item._index === _index);
|
||||
},
|
||||
handleFilterSelect (_index, value) {
|
||||
const index = this.GetOriginalIndex(_index);
|
||||
this.cloneColumns[index]._filterChecked = [value];
|
||||
this.handleFilter(index);
|
||||
},
|
||||
handleFilterReset (index) {
|
||||
handleFilterReset (_index) {
|
||||
const index = this.GetOriginalIndex(_index);
|
||||
this.cloneColumns[index]._isFiltered = false;
|
||||
this.cloneColumns[index]._filterVisible = false;
|
||||
this.cloneColumns[index]._filterChecked = [];
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue