fixed Table multiple head filter & sort bug
This commit is contained in:
梁灏
parent
c1e965c371
commit
9ea47cb3d2
2 changed files with 148 additions and 20 deletions
|
|
@ -3,7 +3,11 @@
|
||||||
<br><br><br><br><br>
|
<br><br><br><br><br>
|
||||||
<Table border :columns="columns1" height="500" :data="data1"></Table>
|
<Table border :columns="columns1" height="500" :data="data1"></Table>
|
||||||
<br><br><br><br><br>
|
<br><br><br><br><br>
|
||||||
<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
|
<!--<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>-->
|
||||||
|
<!--<br><br><br><br><br>-->
|
||||||
|
<Table border :columns="columns5" :data="data5"></Table>
|
||||||
|
<br><br><br><br><br>
|
||||||
|
<Table border :columns="columns6" :data="data5"></Table>
|
||||||
<br><br><br><br><br>
|
<br><br><br><br><br>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -17,7 +21,25 @@
|
||||||
key: 'name',
|
key: 'name',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 200,
|
width: 200,
|
||||||
fixed: 'left'
|
fixed: 'left',
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
label: 'Joe',
|
||||||
|
value: 1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'John',
|
||||||
|
value: 2
|
||||||
|
}
|
||||||
|
],
|
||||||
|
filterMultiple: false,
|
||||||
|
filterMethod (value, row) {
|
||||||
|
if (value === 1) {
|
||||||
|
return row.name === 'Joe';
|
||||||
|
} else if (value === 2) {
|
||||||
|
return row.name === 'John Brown';
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Other',
|
title: 'Other',
|
||||||
|
|
@ -27,7 +49,8 @@
|
||||||
title: 'Age',
|
title: 'Age',
|
||||||
key: 'age',
|
key: 'age',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 200
|
width: 200,
|
||||||
|
sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Address',
|
title: 'Address',
|
||||||
|
|
@ -47,7 +70,8 @@
|
||||||
title: 'Building',
|
title: 'Building',
|
||||||
key: 'building',
|
key: 'building',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
width: 200
|
width: 200,
|
||||||
|
sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Door No.',
|
title: 'Door No.',
|
||||||
|
|
@ -210,12 +234,111 @@
|
||||||
city: 'Ottawa',
|
city: 'Ottawa',
|
||||||
zip: 100000
|
zip: 100000
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
columns5: [
|
||||||
|
{
|
||||||
|
title: 'Date',
|
||||||
|
key: 'date',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
key: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Age',
|
||||||
|
key: 'age',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Address',
|
||||||
|
key: 'address'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
data5: [
|
||||||
|
{
|
||||||
|
name: 'John Brown',
|
||||||
|
age: 18,
|
||||||
|
address: 'New York No. 1 Lake Park',
|
||||||
|
date: '2016-10-03'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jim Green',
|
||||||
|
age: 24,
|
||||||
|
address: 'London No. 1 Lake Park',
|
||||||
|
date: '2016-10-01'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Joe Black',
|
||||||
|
age: 30,
|
||||||
|
address: 'Sydney No. 1 Lake Park',
|
||||||
|
date: '2016-10-02'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Jon Snow',
|
||||||
|
age: 26,
|
||||||
|
address: 'Ottawa No. 2 Lake Park',
|
||||||
|
date: '2016-10-04'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
columns6: [
|
||||||
|
{
|
||||||
|
title: 'Date',
|
||||||
|
key: 'date'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
key: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
const data = [];
|
const data = [];
|
||||||
for (let i = 0; i < 100; i++) {
|
for (let i = 0; i < 20; i++) {
|
||||||
data.push({
|
data.push({
|
||||||
key: i,
|
key: i,
|
||||||
name: 'John Brown',
|
name: 'John Brown',
|
||||||
|
|
|
||||||
|
|
@ -17,42 +17,42 @@
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox></template>
|
<template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox></template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span>
|
<span v-if="!column.renderHeader" @click="handleSortByHead(getColumn(rowIndex, index)._index)">{{ column.title || '#' }}</span>
|
||||||
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
|
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
|
||||||
<span :class="[prefixCls + '-sort']" v-if="column.sortable">
|
<span :class="[prefixCls + '-sort']" v-if="column.sortable">
|
||||||
<i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: column._sortType === 'asc'}" @click="handleSort(index, 'asc')"></i>
|
<i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: getColumn(rowIndex, index)._sortType === 'asc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'asc')"></i>
|
||||||
<i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort(index, 'desc')"></i>
|
<i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
|
||||||
</span>
|
</span>
|
||||||
<Poptip
|
<Poptip
|
||||||
v-if="isPopperShow(column)"
|
v-if="isPopperShow(column)"
|
||||||
v-model="column._filterVisible"
|
v-model="getColumn(rowIndex, index)._filterVisible"
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
popper-class="ivu-table-popper"
|
popper-class="ivu-table-popper"
|
||||||
transfer
|
transfer
|
||||||
@on-popper-hide="handleFilterHide(column._index)">
|
@on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
|
||||||
<span :class="[prefixCls + '-filter']">
|
<span :class="[prefixCls + '-filter']">
|
||||||
<i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
|
<i class="ivu-icon ivu-icon-funnel" :class="{on: getColumn(rowIndex, index)._isFiltered}"></i>
|
||||||
</span>
|
</span>
|
||||||
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
|
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="getColumn(rowIndex, index)._filterMultiple">
|
||||||
<div :class="[prefixCls + '-filter-list-item']">
|
<div :class="[prefixCls + '-filter-list-item']">
|
||||||
<checkbox-group v-model="column._filterChecked">
|
<checkbox-group v-model="getColumn(rowIndex, index)._filterChecked">
|
||||||
<checkbox v-for="(item, index) in column.filters" :key="index" :label="item.value">{{ item.label }}</checkbox>
|
<checkbox v-for="(item, index) in column.filters" :key="index" :label="item.value">{{ item.label }}</checkbox>
|
||||||
</checkbox-group>
|
</checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
<div :class="[prefixCls + '-filter-footer']">
|
<div :class="[prefixCls + '-filter-footer']">
|
||||||
<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" :disabled="!getColumn(rowIndex, index)._filterChecked.length" @click.native="handleFilter(getColumn(rowIndex, index)._index)">{{ t('i.table.confirmFilter') }}</i-button>
|
||||||
<i-button type="text" size="small" @click.native="handleReset(column._index)">{{ t('i.table.resetFilter') }}</i-button>
|
<i-button type="text" size="small" @click.native="handleReset(getColumn(rowIndex, index)._index)">{{ t('i.table.resetFilter') }}</i-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
|
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
|
||||||
<ul :class="[prefixCls + '-filter-list-single']">
|
<ul :class="[prefixCls + '-filter-list-single']">
|
||||||
<li
|
<li
|
||||||
:class="itemAllClasses(column)"
|
:class="itemAllClasses(getColumn(rowIndex, index))"
|
||||||
@click="handleReset(column._index)">{{ t('i.table.clearFilter') }}</li>
|
@click="handleReset(getColumn(rowIndex, index)._index)">{{ t('i.table.clearFilter') }}</li>
|
||||||
<li
|
<li
|
||||||
:class="itemClasses(column, item)"
|
:class="itemClasses(getColumn(rowIndex, index), item)"
|
||||||
v-for="item in column.filters"
|
v-for="item in column.filters"
|
||||||
@click="handleSelect(column._index, item.value)">{{ item.label }}</li>
|
@click="handleSelect(getColumn(rowIndex, index)._index, item.value)">{{ item.label }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</Poptip>
|
</Poptip>
|
||||||
|
|
@ -186,6 +186,11 @@
|
||||||
},
|
},
|
||||||
handleFilterHide (index) {
|
handleFilterHide (index) {
|
||||||
this.$parent.handleFilterHide(index);
|
this.$parent.handleFilterHide(index);
|
||||||
|
},
|
||||||
|
// 因为表头嵌套不是深拷贝，所以没有 _ 开头的方法，在 isGroup 下用此列
|
||||||
|
getColumn (rowIndex, index) {
|
||||||
|
const isGroup = this.columnRows.length > 1;
|
||||||
|
return isGroup ? this.columns[rowIndex] : this.headRows[rowIndex][index];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue