Skip to content

E
Element
Commit bcef4d9e authored by Harlan's avatar Harlan Committed by hetech
Browse files
Options

Table: add resetFilter which can reset filter of a column (#13176) 

* Table: clearFilter can clear the filters of specified columns

* optimize code and add resetFilter example in doc

* Table: Improve documentation of clearFilter
parent 5b32ec42
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 22 deletions
examples/docs/en-US/table.md
View file @ bcef4d9e
......@@ -235,6 +235,13 @@
return sums;
},
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
......@@ -1355,7 +1362,10 @@ Filter the table to find desired data.
:::demo Set attribute `filters` and `filter-method` in `el-table-column` makes this column filterable. `filters` is an array, and `filter-method` is a function deciding which rows are displayed. It has three parameters: `value`, `row` and `column`.
```html
<template>
<el-button @click="resetDateFilter">reset date filter</el-button>
<el-button @click="clearFilter">reset all filters</el-button>
<el-table
ref="filterTable"
:data="tableData"
style="width: 100%">
<el-table-column
......@@ -1363,6 +1373,7 @@ Filter the table to find desired data.
label="Date"
sortable
width="180"
column-key="date"
:filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
:filter-method="filterHandler"
>
......@@ -1421,6 +1432,12 @@ Filter the table to find desired data.
}
},
methods: {
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
formatter(row, column) {
return row.address;
},
......@@ -2100,7 +2117,7 @@ You can customize row index in `type=index` columns.
| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
| clearSort | clear sorting, restore data to the original order | — |
| clearFilter | clear filter | — |
| clearFilter | clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters | columnKeys |
| doLayout | refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout | — |
| sort | sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order | prop: string, order: string |
......
examples/docs/es/table.md
View file @ bcef4d9e
......@@ -234,6 +234,12 @@
return sums;
},
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
......@@ -1353,7 +1359,10 @@ Filtra la tabla para encontrar la información que necesita.
:::demo Establezca el atributo `filters` y `filter-method` en `el-table-column` haciendo esta columna filtrable. `filters` es un arreglo, y `filter-method` es una función que decide que filas se muestra. Esta tiene tres parámetros: `value`, `row` y `column`.
```html
<template>
<el-button @click="resetDateFilter">清除日期过滤器</el-button>
<el-button @click="clearFilter">清除所有过滤器</el-button>
<el-table
ref="filterTable"
:data="tableData"
style="width: 100%">
<el-table-column
......@@ -1361,6 +1370,7 @@ Filtra la tabla para encontrar la información que necesita.
label="Fecha"
sortable
width="180"
column-key="date"
:filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
:filter-method="filterHandler"
>
......@@ -1419,6 +1429,12 @@ Filtra la tabla para encontrar la información que necesita.
}
},
methods: {
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
formatter(row, column) {
return row.address;
},
......@@ -2103,7 +2119,7 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| toggleRowExpansion | utilizado en tabla expandible, alterna si una cierta fila es expandida. Con el segundo parámetro, puede directamente establecer si esta fila es expandida o colapsada | row, expanded |
| setCurrentRow | utilizado en tabla con selección sencilla, establece una cierta fila seleccionada. Si es llamado sin ningún parámetro, este puede limpiar la selección | row |
| clearSort | limpiar ordenamiento, restaurar datos a orden original | — |
| clearFilter | limpiar filtros | — |
| clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |
| doLayout | refresca el layout del Table. Cuando la visibilidad de Table cambia, puede que necesite llamar a este método para obtener un diseño correcto | — |
| sort | Ordenar tabla manualmente. La propiedad `prop` se utiliza para establecer la columna de ordenación, la propiedad `order` se utiliza para establecer el orden. | prop: string, order: string |
......
examples/docs/zh-CN/table.md
View file @ bcef4d9e
......@@ -275,6 +275,12 @@
return sums;
},
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
......@@ -1394,7 +1400,10 @@
:::demo 在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。
```html
<template>
<el-button @click="resetDateFilter">清除日期过滤器</el-button>
<el-button @click="clearFilter">清除所有过滤器</el-button>
<el-table
ref="filterTable"
:data="tableData"
style="width: 100%">
<el-table-column
......@@ -1402,6 +1411,7 @@
label="日期"
sortable
width="180"
column-key="date"
:filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
:filter-method="filterHandler"
>
......@@ -1460,6 +1470,12 @@
}
},
methods: {
resetDateFilter() {
this.$refs.filterTable.clearFilter('date');
},
clearFilter() {
this.$refs.filterTable.clearFilter();
},
formatter(row, column) {
return row.address;
},
......@@ -2161,7 +2177,7 @@
| toggleRowExpansion | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
| setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
| clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
| clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | — |
| clearFilter | 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件 | columnKey |
| doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 | — |
| sort | 手动对 Table 进行排序。参数`prop`属性指定排序列，`order`指定排序顺序。 | prop: string, order: string |
......
packages/table/src/table-store.js
View file @ bcef4d9e
......@@ -2,7 +2,7 @@ import Vue from 'vue';
import debounce from 'throttle-debounce/debounce';
import merge from 'element-ui/src/utils/merge';
import { hasClass, addClass, removeClass } from 'element-ui/src/utils/dom';
import { orderBy, getColumnById, getRowIdentity } from './util';
import { orderBy, getColumnById, getRowIdentity, getColumnByKey } from './util';
const sortData = (data, states) => {
const sortingColumn = states.sortingColumn;
......@@ -238,17 +238,24 @@ TableStore.prototype.mutations = {
},
filterChange(states, options) {
let { column, values, silent } = options;
let { column, values, silent, multi } = options;
if (values && !Array.isArray(values)) {
values = [values];
}
const prop = column.property;
const filters = {};
if (prop) {
states.filters[column.id] = values;
filters[column.columnKey || column.id] = values;
if (multi) {
column.forEach(col => {
states.filters[col.id] = values;
filters[col.columnKey || col.id] = values;
});
} else {
const prop = column.property;
if (prop) {
states.filters[column.id] = values;
filters[column.columnKey || column.id] = values;
}
}
let data = states._data;
......@@ -495,7 +502,7 @@ TableStore.prototype.cleanSelection = function() {
}
};
TableStore.prototype.clearFilter = function() {
TableStore.prototype.clearFilter = function(columnKeys) {
const states = this.states;
const { tableHeader, fixedTableHeader, rightFixedTableHeader } = this.table.$refs;
let panels = {};
......@@ -507,17 +514,36 @@ TableStore.prototype.clearFilter = function() {
const keys = Object.keys(panels);
if (!keys.length) return;
keys.forEach(key => {
panels[key].filteredValue = [];
});
if (typeof columnKeys === 'string') {
columnKeys = [columnKeys];
}
if (Array.isArray(columnKeys)) {
const columns = columnKeys.map(key => getColumnByKey(states, key));
keys.forEach(key => {
const column = columns.find(col => col.id === key);
if (column) {
panels[key].filteredValue = [];
}
});
this.commit('filterChange', {
column: columns,
value: [],
silent: true,
multi: true
});
} else {
keys.forEach(key => {
panels[key].filteredValue = [];
});
states.filters = {};
states.filters = {};
this.commit('filterChange', {
column: {},
values: [],
silent: true
});
this.commit('filterChange', {
column: {},
values: [],
silent: true
});
}
};
TableStore.prototype.clearSort = function() {
......
packages/table/src/table.vue
View file @ bcef4d9e
......@@ -347,8 +347,8 @@
this.store.clearSelection();
},
clearFilter() {
this.store.clearFilter();
clearFilter(columnKeys) {
this.store.clearFilter(columnKeys);
},
clearSort() {
......
packages/table/src/util.js
View file @ bcef4d9e
......@@ -84,6 +84,18 @@ export const getColumnById = function(table, columnId) {
return column;
};
export const getColumnByKey = function(table, columnKey) {
let column = null;
for (let i = 0; i < table.columns.length; i++) {
const item = table.columns[i];
if (item.columnKey === columnKey) {
column = item;
break;
}
}
return column;
};
export const getColumnByCell = function(table, cell) {
const matches = (cell.className || '').match(/el-table_[^\s]+/gm);
if (matches) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment