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

fixed #2832

Browse source
This commit is contained in:
梁灏 2018-01-19 17:34:02 +08:00
parent 57fe55624e
commit b34e09b8f9
3 changed files with 136 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
examples/routers/table.vue
View file

@ -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> <template>
<Table border :columns="columns6" :data="data5"></Table> <Table border :columns="columns5" :data="data5"></Table>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
columns6: [ columns5: [
{ {
title: 'Date', title: 'Date',
key: 'date' key: 'date',
sortable: true
}, },
{ {
title: 'Name', title: 'Name',
@ -17,45 +120,12 @@
{ {
title: 'Age', title: 'Age',
key: 'age', key: 'age',
filters: [ fixed: 'right',
{ sortable: true
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', title: 'Address',
key: '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;
}
} }
], ],
data5: [ data5: [
@ -83,7 +153,7 @@
address: 'Ottawa No. 2 Lake Park', address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04' date: '2016-10-04'
} }
], ]
} }
} }
} }

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

@ -23,7 +23,7 @@
v-if="isPopperShow(column)" v-if="isPopperShow(column)"
v-model="column._filterVisible" v-model="column._filterVisible"
placement="bottom" placement="bottom"
@on-popper-hide="handleFilterHide(index)"> @on-popper-hide="handleFilterHide(column._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: column._isFiltered}"></i>
</span> </span>
@ -34,19 +34,19 @@
</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(index)">{{ t('i.table.confirmFilter') }}</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(index)">{{ t('i.table.resetFilter') }}</i-button> <i-button type="text" size="small" @click.native="handleReset(column._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(column)"
@click="handleReset(index)">{{ t('i.table.clearFilter') }}</li> @click="handleReset(column._index)">{{ t('i.table.clearFilter') }}</li>
<li <li
:class="itemClasses(column, item)" :class="itemClasses(column, item)"
v-for="item in column.filters" v-for="item in column.filters"
@click="handleSelect(index, item.value)">{{ item.label }}</li> @click="handleSelect(column._index, item.value)">{{ item.label }}</li>
</ul> </ul>
</div> </div>
</Poptip> </Poptip>
@ -133,10 +133,13 @@
this.$parent.selectAll(status); this.$parent.selectAll(status);
}, },
handleSort (index, type) { handleSort (index, type) {
if (this.columns[index]._sortType === type) { const column = this.columns[index];
const _index = column._index;
if (column._sortType === type) {
type = 'normal'; type = 'normal';
} }
this.$parent.handleSort(index, type); this.$parent.handleSort(_index, type);
}, },
handleSortByHead (index) { handleSortByHead (index) {
const column = this.columns[index]; const column = this.columns[index];

19
src/components/table/table.vue
View file

@ -522,7 +522,8 @@
}); });
return data; return data;
}, },
handleSort (index, type) { handleSort (_index, type) {
const index = this.GetOriginalIndex(_index);
this.cloneColumns.forEach((col) => col._sortType = 'normal'); this.cloneColumns.forEach((col) => col._sortType = 'normal');
const key = this.cloneColumns[index].key; const key = this.cloneColumns[index].key;
@ -582,11 +583,23 @@
this.cloneColumns[index]._filterVisible = false; this.cloneColumns[index]._filterVisible = false;
this.$emit('on-filter-change', column); 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.cloneColumns[index]._filterChecked = [value];
this.handleFilter(index); this.handleFilter(index);
}, },
handleFilterReset (index) { handleFilterReset (_index) {
const index = this.GetOriginalIndex(_index);
this.cloneColumns[index]._isFiltered = false; this.cloneColumns[index]._isFiltered = false;
this.cloneColumns[index]._filterVisible = false; this.cloneColumns[index]._filterVisible = false;
this.cloneColumns[index]._filterChecked = []; this.cloneColumns[index]._filterChecked = [];