Skip to content

E
Element
Commit ee5cd93d authored by liyl's avatar liyl Committed by 杨奕
Browse files
Options

Table: add column as filter-method's param (#9196) 

* expand filter-method param

* update table.md
parent 8ded46c8
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 12 deletions
examples/docs/en-US/table.md
View file @ ee5cd93d
......@@ -216,9 +216,11 @@
return sums;
},
setCurrent(row) {
this.$refs.singleTable.setCurrentRow(row);
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
......@@ -240,6 +242,7 @@
handleDelete(index, row) {
console.log(index, row);
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
......@@ -256,6 +259,11 @@
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
......@@ -1326,7 +1334,7 @@ Sort the data to find or compare data quickly.
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 two parameters: `value` and `row`.
:::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-table
......@@ -1336,7 +1344,10 @@ Filter the table to find desired data.
prop="date"
label="Date"
sortable
width="180">
width="180"
: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"
>
</el-table-column>
<el-table-column
prop="name"
......@@ -1397,6 +1408,10 @@ Filter the table to find desired data.
},
filterTag(value, row) {
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
}
}
}
......@@ -2024,5 +2039,5 @@ You can customize row index in `type=index` columns.
| filters | an array of data filtering options. For each element in this array, `text` and `value` are required | Array[{ text, value }] | — | — |
| filter-placement | placement for the filter dropdown | String | same as Tooltip's `placement` | — |
| filter-multiple | whether data filtering supports multiple options | Boolean | — | true |
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row) | — | — |
| filter-method | data filtering method. If `filter-multiple` is on, this method will be called multiple times for each row, and a row will display if one of the calls returns `true` | Function(value, row, column) | — | — |
| filtered-value | filter value for selected data, might be useful when table header is rendered with `render-header` | Array | — | — |
examples/docs/es/table.md
View file @ ee5cd93d
......@@ -240,6 +240,7 @@
handleDelete(index, row) {
console.log(index, row);
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
......@@ -255,7 +256,12 @@
filterTag(value, row) {
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
......@@ -1326,7 +1332,7 @@ Ordena los datos para encontrar o comparar información rápidamente.
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 dos parámetros: `value` y `row`.
:::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` y `row` y `column`.
```html
<template>
<el-table
......@@ -1336,7 +1342,10 @@ Filtra la tabla para encontrar la información que necesita.
prop="date"
label="Fecha"
sortable
width="180">
width="180"
: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"
>
</el-table-column>
<el-table-column
prop="name"
......@@ -1397,6 +1406,10 @@ Filtra la tabla para encontrar la información que necesita.
},
filterTag(value, row) {
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
}
}
}
......@@ -2028,5 +2041,5 @@ Puede personalizar el índice de la fila con la propiedad `type=index` de las co
| filters | un arreglo de opciones para filtrado de datos. Para cada elemento en este arreglo, `text` y `value` son obligatorios | Array[{ text, value }] | — | — |
| filter-placement | colocación para el menu desplegable del filtro | String | same as Tooltip's `placement` | — |
| filter-multiple | especifica si el filtrado de datos soporta múltiples opciones | Boolean | — | true |
| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row) | — | — |
| filter-method | método para filtrado de datos. Si `filter-multiple` está habilitado, este método se invocará varias veces para cada fila, y una fila puede mostrar si una de las llamadas devuelve `true` | Function(value, row, column) | — | — |
| filtered-value | el valor del filtro para los datos seleccionados, puede ser útil cuando el encabezado de la tabla se representará con `render-header` | Array | — | — |
examples/docs/zh-CN/table.md
View file @ ee5cd93d
......@@ -298,6 +298,11 @@
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
},
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
......@@ -1368,7 +1373,7 @@
对表格进行筛选，可快速查找到自己想看的数据。
:::demo 在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入两个参数：`value`和`row`。
:::demo 在列中设置`filters` `filter-method`属性即可开启该列的筛选，filters 是一个数组，`filter-method`是一个方法，它用于决定某些数据是否显示，会传入三个参数：`value`, `row` 和 `column`。
```html
<template>
<el-table
......@@ -1378,7 +1383,10 @@
prop="date"
label="日期"
sortable
width="180">
width="180"
: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"
>
</el-table-column>
<el-table-column
prop="name"
......@@ -1439,6 +1447,10 @@
},
filterTag(value, row) {
return row.tag === value;
},
filterHandler(value, row, column) {
const property = column['property'];
return row[property] === value;
}
}
}
......@@ -2087,5 +2099,5 @@
| filters | 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — |
| filter-placement | 过滤弹出框的定位 | String | 与 Tooltip 的 `placement` 属性相同 | — |
| filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true |
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row) | — | — |
| filter-method | 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 | Function(value, row, column) | — | — |
| filtered-value | 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 | Array | — | — |
packages/table/src/table-store.js
View file @ ee5cd93d
......@@ -129,7 +129,7 @@ TableStore.prototype.mutations = {
const column = getColumnById(this.states, columnId);
if (column && column.filterMethod) {
data = data.filter((row) => {
return values.some(value => column.filterMethod.call(null, value, row));
return values.some(value => column.filterMethod.call(null, value, row, column));
});
}
});
......@@ -219,7 +219,7 @@ TableStore.prototype.mutations = {
const column = getColumnById(this.states, columnId);
if (column && column.filterMethod) {
data = data.filter((row) => {
return values.some(value => column.filterMethod.call(null, value, row));
return values.some(value => column.filterMethod.call(null, value, row, column));
});
}
});
......
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