AntDesign表格筛选器：如何在筛选器中限制只能选择一个选项？
创始人
2024-11-07 12:30:35
0次

可以使用Ant Design的Select组件和onFilterDropdownVisibleChange属性来实现限制筛选器只能选择一个选项。具体代码如下：

import { Table, Select } from 'antd';

const { Option } = Select;

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFilterValue: '',
      filterDropdownVisible: false,
      data,
    };
  }

  onFilterDropdownVisibleChange = (visible) => {
    this.setState({
      filterDropdownVisible: visible,
    });
  };

  onFilterSelectChange = (selectedFilterValue) => {
    this.setState({
      selectedFilterValue,
      filterDropdownVisible: false,
      data: data.filter((record) => record.age === selectedFilterValue),
    });
  };

  render() {
    const { data, selectedFilterValue, filterDropdownVisible } = this.state;
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        filterDropdown: (