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>
|
||||
<Table border :columns="columns1" height="500" :data="data1"></Table>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,7 +21,25 @@
|
|||
key: 'name',
|
||||
align: 'center',
|
||||
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',
|
||||
|
|
@ -27,7 +49,8 @@
|
|||
title: 'Age',
|
||||
key: 'age',
|
||||
align: 'center',
|
||||
width: 200
|
||||
width: 200,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
|
|
@ -47,7 +70,8 @@
|
|||
title: 'Building',
|
||||
key: 'building',
|
||||
align: 'center',
|
||||
width: 200
|
||||
width: 200,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
title: 'Door No.',
|
||||
|
|
@ -210,12 +234,111 @@
|
|||
city: 'Ottawa',
|
||||
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 () {
|
||||
const data = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: 'John Brown',
|
||||
|
|
|
|||
|
|
@ -17,42 +17,42 @@
|
|||
</template>
|
||||
<template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" :disabled="!data.length" @on-change="selectAll"></Checkbox></template>
|
||||
<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>
|
||||
<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-down-b" :class="{on: column._sortType === 'desc'}" @click="handleSort(index, 'desc')"></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: getColumn(rowIndex, index)._sortType === 'desc'}" @click="handleSort(getColumn(rowIndex, index)._index, 'desc')"></i>
|
||||
</span>
|
||||
<Poptip
|
||||
v-if="isPopperShow(column)"
|
||||
v-model="column._filterVisible"
|
||||
v-model="getColumn(rowIndex, index)._filterVisible"
|
||||
placement="bottom"
|
||||
popper-class="ivu-table-popper"
|
||||
transfer
|
||||
@on-popper-hide="handleFilterHide(column._index)">
|
||||
@on-popper-hide="handleFilterHide(getColumn(rowIndex, index)._index)">
|
||||
<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>
|
||||
<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']">
|
||||
<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-group>
|
||||
</div>
|
||||
<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" @click.native="handleReset(column._index)">{{ t('i.table.resetFilter') }}</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(getColumn(rowIndex, index)._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(column._index)">{{ t('i.table.clearFilter') }}</li>
|
||||
:class="itemAllClasses(getColumn(rowIndex, index))"
|
||||
@click="handleReset(getColumn(rowIndex, index)._index)">{{ t('i.table.clearFilter') }}</li>
|
||||
<li
|
||||
:class="itemClasses(column, item)"
|
||||
:class="itemClasses(getColumn(rowIndex, index), item)"
|
||||
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>
|
||||
</div>
|
||||
</Poptip>
|
||||
|
|
@ -186,6 +186,11 @@
|
|||
},
|
||||
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