diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 5569a340..6bf6f9b7 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -14,25 +14,31 @@
-
+
-
+
{{ item.label }}
-
- 筛选
+ 筛选
重置
+
+
+ - 全部
+ - {{ item.label }}
+
+
@@ -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);
}
}
}
diff --git a/src/components/table/table.vue b/src/components/table/table.vue
index 07285a5c..6a0180b5 100644
--- a/src/components/table/table.vue
+++ b/src/components/table/table.vue
@@ -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 () {
diff --git a/src/styles/components/table.less b/src/styles/components/table.less
index 04c70b78..abf572c7 100644
--- a/src/styles/components/table.less
+++ b/src/styles/components/table.less
@@ -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;
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 0379827f..21a28dab 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -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 `${row.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