drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed Table multiple head filter & sort bug

Browse source
This commit is contained in:
梁灏 2018-03-26 14:28:11 +08:00
parent c1e965c371
commit 9ea47cb3d2
2 changed files with 148 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/table/table-head.vue
View file

@ -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];
}
}
};