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

update Table

Browse source 
update Table
This commit is contained in:
梁灏 2016-11-29 11:04:48 +08:00
parent 7f1edb6a15
commit adaeca88ba
4 changed files with 65 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,25 +14,31 @@
<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>
</span>
<Poptip v-if="column.filters" :visible.sync="column._filterVisible" placement="bottom">
<Poptip
v-if="column.filters && (fixed || (!fixed && !column.fixed))"
:visible.sync="column._filterVisible"
placement="bottom"
@on-popper-hide="handleFilterHide($index)">
<span :class="[prefixCls + '-filter']">
<i class="ivu-icon ivu-icon-funnel" :class="{on: column._isFiltered}"></i>
</span>
<div slot="content" :class="[prefixCls + '-filter-list']">
<div slot="content" :class="[prefixCls + '-filter-list']" v-if="column._filterMultiple">
<div :class="[prefixCls + '-filter-list-item']">
<checkbox-group :model.sync="column._filterChecked">
<checkbox v-for="item in column.filters" :value="item.value">{{ item.label }}</checkbox>
</checkbox-group>
</div>
<ul>
<!--<li v-for="(filterIndex, item) in column.filters"><Checkbox :checked="column._filterChecked.indexOf(item.value) > -1" @on-change="handleFilterChecked(index, filterIndex)">{{ item.label }}</Checkbox></li>-->
</ul>
<div :class="[prefixCls + '-filter-footer']">
<i-button type="text" size="small" @click="handleFilter($index)">筛选</i-button>
<i-button type="text" size="small" :disabled="!column._filterChecked.length" @click="handleFilter($index)">筛选</i-button>
<i-button type="text" size="small" @click="handleReset($index)">重置</i-button>
</div>
</div>
<div slot="content" :class="[prefixCls + '-filter-list']" v-else>
<ul>
<li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: !column._filterChecked.lengtg}]">全部</li>
<li :class="[prefixCls + '-filter-select-item', {[prefixCls + '-filter-select-item-selected']: column._filterChecked[0] === item.value}]" v-for="item in column.filters">{{ item.label }}</li>
</ul>
</div>
</Poptip>
</template>
</div>
@ -99,13 +105,13 @@
this.$parent.handleSort(index, type);
},
handleFilter (index) {
this.$parent.handleFilter(index);
},
handleReset (index) {
this.$parent.handleFilterReset(index);
},
handleFilterChecked (index, filterIndex) {
handleFilterHide (index) {
this.$parent.handleFilterHide(index);
}
}
}

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

@ -115,6 +115,7 @@
},
data () {
return {
ready: false,
tableWidth: 0,
columnsWidth: [],
prefixCls: prefixCls,
@ -132,6 +133,7 @@
return [
`${prefixCls}`,
{
[`${prefixCls}-hide`]: !this.ready,
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-border`]: this.border,
[`${prefixCls}-stripe`]: this.stripe,
@ -344,6 +346,27 @@
order: type
})
},
handleFilterHide (index) { // clear checked that not filter now
if (!this.cloneColumns[index]._isFiltered) this.cloneColumns[index]._filterChecked = [];
},
handleFilter (index) {
const column = this.cloneColumns[index];
const filterData = this.makeData();
this.rebuildData = filterData.filter((row) => {
let status = false;
for (let i = 0; i < column._filterChecked.length; i++) {
status = column.filterMethod(column._filterChecked[i], row);
if (status) break;
}
return status;
});
this.cloneColumns[index]._isFiltered = true;
this.cloneColumns[index]._filterVisible = false;
},
handleFilterReset (index) {
this.cloneColumns[index]._isFiltered = false;
},
makeData () {
let data = deepCopy(this.data);
data.forEach((row, index) => row._index = index);
@ -373,6 +396,12 @@
column._isFiltered = false;
column._filterChecked = [];
if ('filterMultiple' in column) {
column._filterMultiple = column.filterMultiple;
} else {
column._filterMultiple = true;
}
if (column.fixed && column.fixed === 'left') {
left.push(column);
} else if (column.fixed && column.fixed === 'right') {
@ -391,6 +420,7 @@
ready () {
this.handleResize();
this.fixedHeader();
this.$nextTick(() => this.ready = true);
window.addEventListener('resize', this.handleResize, false);
},
beforeDestroy () {