{
title: '姓名',
dataIndex: 'name',
filters: [
{ text: '小明', value: '小明' },
{ text: '小红', value: '小红' },
],
onFilter: (value, record) => record.name.indexOf(value) === 0,
},
其中text表示筛选器的显示文本,value表示筛选器的值,onFilter是一个回调函数,返回筛选结果。
const { Search } = Input;
全选
其中handleCheckAll和handleSearch是两个回调函数,分别处理全选和搜索功能。
完整示例代码:
import { Table, Input, Checkbox, Row, Col } from 'antd';
import React, { useState } from 'react';
const data = [
{ key: '1', name: '小明' },
{ key: '2', name: '小红' },
{ key: '3', name: '小花' },
];
const TableWithFilter = () => {
const [searchText, setSearchText] = useState('');
const [checkAll, setCheckAll] = useState(false);
const [indeterminate, setIndeterminate] = useState(false);
const [filteredData, setFilteredData] = useState(data);
const handleSearch = e => {
const { value } = e.target;
setSearchText(value);
const newData = data.filter(item => item.name.includes(value));
setFilteredData(newData);
};
const handleCheckAll = e => {
setCheckAll(e.target.checked);
setIndeterminate(false);
setFilteredData(e.target.checked ? data : []);
};
const