update Table
update Table
This commit is contained in:
梁灏
parent
7f1edb6a15
commit
adaeca88ba
4 changed files with 65 additions and 16 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@table-prefix-cls: ~"@{css-prefix}table";
|
||||
@table-select-item-prefix-cls: ~"@{table-prefix-cls}-filter-select-item";
|
||||
|
||||
.@{table-prefix-cls} {
|
||||
width: 100%;
|
||||
|
|
@ -13,6 +14,10 @@
|
|||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&-hide{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content: '';
|
||||
width: 100%;
|
||||
|
|
@ -262,6 +267,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
ul{
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.select-item(@table-prefix-cls, @table-select-item-prefix-cls);
|
||||
}
|
||||
&-footer{
|
||||
padding: 4px;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@
|
|||
value: 'company'
|
||||
}
|
||||
],
|
||||
filterMultiple: false
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
|
|
@ -78,8 +79,11 @@
|
|||
value: 'company'
|
||||
}
|
||||
],
|
||||
filterMethod (value, row) {
|
||||
return row.tag === value;
|
||||
},
|
||||
render (row) {
|
||||
const type = `${row.tag}` === '家' ? 'green' : 'red';
|
||||
const type = `${row.tag}` === 'home' ? 'green' : 'red';
|
||||
return `<tag color="${type}">${row.tag}</tag>`;
|
||||
}
|
||||
},
|
||||
|
|
@ -135,28 +139,28 @@
|
|||
age: 25,
|
||||
address: '北京市朝阳区',
|
||||
edit: false,
|
||||
tag: '家'
|
||||
tag: 'home'
|
||||
},
|
||||
{
|
||||
name: '段模',
|
||||
age: 21,
|
||||
address: '北京市海淀区',
|
||||
edit: false,
|
||||
tag: '公司'
|
||||
tag: 'company'
|
||||
},
|
||||
{
|
||||
name: '刘天娇',
|
||||
age: 27,
|
||||
address: '北京市东城区',
|
||||
edit: false,
|
||||
tag: '公司'
|
||||
tag: 'company'
|
||||
},
|
||||
{
|
||||
name: '胡国伟',
|
||||
age: 22,
|
||||
address: '北京市西城区',
|
||||
edit: false,
|
||||
tag: '家'
|
||||
tag: 'home'
|
||||
}
|
||||
],
|
||||
height: 200
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue