mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
Fix Table column.filteredValue null problem, ref #4550
This commit is contained in:
parent
dc00b9ee96
commit
3f5aebe85b
@ -294,7 +294,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
|
||||
}
|
||||
|
||||
getFilteredValueColumns(columns?) {
|
||||
return (columns || this.columns || []).filter(column => column.filteredValue);
|
||||
return (columns || this.columns || []).filter(column => typeof column.filteredValue !== 'undefined');
|
||||
}
|
||||
|
||||
getFiltersFromColumns(columns?) {
|
||||
|
@ -128,6 +128,22 @@ describe('Table.filter', () => {
|
||||
expect(wrapper.find('tbody tr').length).toBe(4);
|
||||
});
|
||||
|
||||
it('can be controlled by filteredValue null', () => {
|
||||
const wrapper = mount(createTable({
|
||||
columns: [{
|
||||
...column,
|
||||
filteredValue: ['girl'],
|
||||
}],
|
||||
}));
|
||||
|
||||
expect(wrapper.find('tbody tr').length).toBe(1);
|
||||
wrapper.setProps({ columns: [{
|
||||
...column,
|
||||
filteredValue: null,
|
||||
}] });
|
||||
expect(wrapper.find('tbody tr').length).toBe(4);
|
||||
});
|
||||
|
||||
it('fires change event', () => {
|
||||
const handleChange = jest.fn();
|
||||
const wrapper = mount(createTable({ onChange: handleChange }));
|
||||
|
@ -6908,18 +6908,27 @@ exports[`test renders ./components/table/demo/reset-filter.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="table-operations">
|
||||
<a
|
||||
href="#">
|
||||
Age descending order
|
||||
</a>
|
||||
<a
|
||||
href="#">
|
||||
Clear filters
|
||||
</a>
|
||||
<a
|
||||
href="#">
|
||||
Clear filters and sorting
|
||||
</a>
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Sort age
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Clear filters
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Clear filters and sorters
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class=" clearfix">
|
||||
|
@ -22,7 +22,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
|
||||
> 3. `column.key` is required.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
import { Table, Button } from 'antd';
|
||||
|
||||
const data = [{
|
||||
key: '1',
|
||||
@ -60,19 +60,16 @@ const App = React.createClass({
|
||||
sortedInfo: sorter,
|
||||
});
|
||||
},
|
||||
clearFilters(e) {
|
||||
e.preventDefault();
|
||||
clearFilters() {
|
||||
this.setState({ filteredInfo: null });
|
||||
},
|
||||
clearAll(e) {
|
||||
e.preventDefault();
|
||||
clearAll() {
|
||||
this.setState({
|
||||
filteredInfo: null,
|
||||
sortedInfo: null,
|
||||
});
|
||||
},
|
||||
setAgeSort(e) {
|
||||
e.preventDefault();
|
||||
setAgeSort() {
|
||||
this.setState({
|
||||
sortedInfo: {
|
||||
order: 'descend',
|
||||
@ -92,7 +89,7 @@ const App = React.createClass({
|
||||
{ text: 'Joe', value: 'Joe' },
|
||||
{ text: 'Jim', value: 'Jim' },
|
||||
],
|
||||
filteredValue: filteredInfo.name,
|
||||
filteredValue: filteredInfo.name || null,
|
||||
onFilter: (value, record) => record.name.includes(value),
|
||||
sorter: (a, b) => a.name.length - b.name.length,
|
||||
sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
|
||||
@ -110,7 +107,7 @@ const App = React.createClass({
|
||||
{ text: 'London', value: 'London' },
|
||||
{ text: 'New York', value: 'New York' },
|
||||
],
|
||||
filteredValue: filteredInfo.address,
|
||||
filteredValue: filteredInfo.address || null,
|
||||
onFilter: (value, record) => record.address.includes(value),
|
||||
sorter: (a, b) => a.address.length - b.address.length,
|
||||
sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
|
||||
@ -118,9 +115,9 @@ const App = React.createClass({
|
||||
return (
|
||||
<div>
|
||||
<div className="table-operations">
|
||||
<a href="#" onClick={this.setAgeSort}>Age descending order</a>
|
||||
<a href="#" onClick={this.clearFilters}>Clear filters</a>
|
||||
<a href="#" onClick={this.clearAll}>Clear filters and sorting</a>
|
||||
<Button type="ghost" onClick={this.setAgeSort}>Sort age</Button>
|
||||
<Button type="ghost" onClick={this.clearFilters}>Clear filters</Button>
|
||||
<Button type="ghost" onClick={this.clearAll}>Clear filters and sorters</Button>
|
||||
</div>
|
||||
<Table columns={columns} dataSource={data} onChange={this.handleChange} />
|
||||
</div>
|
||||
@ -133,12 +130,10 @@ ReactDOM.render(<App />, mountNode);
|
||||
|
||||
````css
|
||||
.table-operations {
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-operations a {
|
||||
margin-left: 8px;
|
||||
.table-operations > button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
````
|
||||
|
Loading…
Reference in New Issue
Block a user