reactjs - 过滤一系列数据 - Ant Design Table

Question

在我的反应项目中，我添加了 ANT 设计表，并实现了自定义列搜索来过滤我的数据。

有什么方法可以过滤 ANT 表中某个范围内的数据？就像在我的“出勤”列中一样，我想过滤出勤率从 50 到 80 的学生。如何在 ANT Table 中实现这一点？

谢谢。

代码

import React, { useState, useRef } from 'react';
import { Table, Input, Button, Space } from 'antd';
import Highlighter from 'react-highlight-words';
import { SearchOutlined } from '@ant-design/icons';
import '../node_modules/antd/dist/antd.css';

const App = () => {
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const searchInput = useRef(null);

  let student = [
    {
      rollNo: 1, name: "Rohit", fatherName: "Lalit", motherName: "Abha", age: 22, marks: 54, address: "Delhi", attendance: 85, contact: 7097991361
    },
    {
      rollNo: 2, name: "Rohan", fatherName: "Ram", motherName: "Akanksha", age: 23, marks: 60, address: "Mumbai", attendance: 56, contact: 7097775553
    },
    {
      rollNo: 3, name: "Ishfaq", fatherName: "Maqbool", motherName: "Amala", age: 24, marks: 49, address: "Chennai", attendance: 73, contact: 7097891779
    },
    {
      rollNo: 4, name: "Sanjay", fatherName: "Ramesh", motherName: "Aditi", age: 24, marks: 44, address: "Mohali", attendance: 55, contact: 7097683032
    },
    {
      rollNo: 5, name: "Anuj", fatherName: "Narayan", motherName: "Amita", age: 23, marks: 56, address: "Delhi", attendance: 60, contact: 7097574082
    },
  ]

  const getColumnSearchProps = dataIndex => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          type={dataIndex === 'age' ? 'number' : dataIndex === 'marks' ? 'number' : dataIndex === 'attendance' ? 'number' : dataIndex === 'contact' ? 'number' : 'text'}
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{ width: 90 }}
          >
            Search
          </Button>
          <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
            Reset
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              confirm({ closeDropdown: false });
              setSearchText({
                searchText: selectedKeys[0],
              });
              setSearchedColumn({
                searchedColumn: dataIndex,
              });
            }}
          >
            Filter
          </Button>
        </Space>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
        : '',
    onFilterDropdownVisibleChange: visible => {
      if (visible) {
        setTimeout(() => searchInput.current.select(), 100);
      }
    },
    render: text =>
      searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ''}
        />
      ) : (
        text
      ),
  });

  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm()
    setSearchText({
      searchText: selectedKeys[0],
    });
    setSearchedColumn({
      searchedColumn: dataIndex,
    });
  };

  const handleReset = clearFilters => {
    clearFilters();
    setSearchText({ searchText: '' });
  };
  const columns = [
    {
      title: 'Roll No.',
      dataIndex: 'rollNo',
      key: 'rollNo',
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      ...(getColumnSearchProps)('name'),
    },
    {
      title: 'Father Name',
      dataIndex: 'fatherName',
      key: 'fatherName',
      ...(getColumnSearchProps)('fatherName'),
    },
    {
      title: 'Mother Name',
      dataIndex: 'motherName',
      key: 'motherName',
      ...(getColumnSearchProps)('motherName'),
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      ...(getColumnSearchProps)('age'),
    },
    {
      title: 'Marks',
      dataIndex: 'marks',
      key: 'marks',
      ...(getColumnSearchProps)('marks'),
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      ...(getColumnSearchProps)('address'),
    },
    {
      title: 'Attendance',
      dataIndex: 'attendance',
      key: 'attendance',
      ...(getColumnSearchProps)('attendance'),
    },
    {
      title: 'Fine',
      dataIndex: 'fine',
      key: 'fine',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: 'Contact',
      dataIndex: 'contact',
      key: 'contact',
      ...(getColumnSearchProps)('contact'),
    },
  ];
  return <Table columns={columns} dataSource={student} />;
}

export default App;

标签： reactjsantd