react-table 表头增加搜索

小超^_^

已于 2024-01-03 14:42:37 修改

阅读量796

点赞数

文章标签： react.js vue.js 前端

于 2022-12-30 18:22:59 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66288747/article/details/128499128

版权

该博客介绍了如何在Ant Design的Table组件中实现搜索功能。通过定义`getColumnSearchProps`方法，为表格的各列添加筛选下拉框，包括输入框、搜索和重置按钮。当用户输入搜索关键词并点击搜索时，会高亮显示匹配的文本。同时，博客展示了具体的代码实现和搜索操作的逻辑处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格 Table - Ant Design


import { Row, Col, Table, Button, Switch, Input, Space } from 'antd';

import { SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';



    state = {
      
        searchedColumn: '',
    }
    
    
    
    // table 搜索
    getColumnSearchProps = (dataIndex, name) => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div style={{ padding: 8 }}>
                <Input
                    ref={node => {
                        this.searchInput = node;
                    }}
                    placeholder={`筛选${name}`}
                    value={selectedKeys[0]}
                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
                    style={{ width: 188, marginBottom: 8, display: 'block' }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{ width: 90 }}
                    >
                        搜索
                    </Button>
                    <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
                        重置
                    </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(() => this.searchInput.select(), 100);
            }
        },

        render: text =>
            this.state.searchedColumn === dataIndex ? (
                <Highlighter
                    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                    searchWords={[this.state.searchText]}
                    autoEscape
                    textToHighlight={text ? text.toString() : ''}
                />
            ) : (
                text
            ),
    });
    // 搜索按钮
    handleSearch = (selectedKeys, confirm, dataIndex) => {
        confirm();
        this.setState({
            searchText: selectedKeys[0],
            searchedColumn: dataIndex,
        });
    };
    // 清空按钮
    handleReset = clearFilters => {
        clearFilters();
        this.setState({
            searchText: ''
        });
  



      
        const columns = [
            {
                title: '服务名称',
                dataIndex: 'name',
                width: '40%',
                ...this.getColumnSearchProps('name', '服务名称'),
            },
           
            {
                title: '所属中台',
                dataIndex: 'topic',
                width: '20%',
                ...this.getColumnSearchProps('topic', '所属中台'),
            },
           
        ];


    
                        <Table
                            columns={columns}
                            dataSource={data}
                        />