Ant design Table dataIndex不适用于搜索选项时

Question

我正在使用我的 ant design 4 table 的反应类型脚本项目进行表格搜索。但是表格搜索dataIndex 不起作用，有什么解决方案吗？

stackblitz here

{
    title: 'My Book',
    dataIndex: 'myBook',
    key: 'myBook',
    ...this.getColumnSearchProps('myBook'),
    render: (text: any, res: any) => <span>{res.myDetails.myBook}</span>,
},

这里是我的数据源

import {bookDetailDto} from "app/dto/bookDetailDto";
    
export interface BookdetailDto {
    myBook:string,       
    bookDetailDto:bookDetailDto,
}

表格

<Table
    columns={this.columns}
    dataSource={this.state.BookdetailDto}
    scroll={{x: 1100, y: 300}}
    size={'small'} onChange={onChange}
    bordered                     
    rowKey={record => record.myBook.toString()}
/>

Answer 1

例如创建示例User 接口和Group 接口

import * as React from "react";
import { Table, Input, Button, Space } from "antd";
import { ColumnsType } from "antd/es/table";
import { SearchOutlined } from "@ant-design/icons";
import "antd/dist/antd.css";
import "./styles.css";

interface User {
  key: number;
  name: string;
  age: number;
  address: string;
}

interface Group {
  key: number;
  some: string;
  user: User;
}

const data: Group[] = [
  {
    key: 1,
    some: "foo",
    user: {
      key: 9,
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park"
    }
  },
  {
    key: 2,
    some: "bar",
    user: {
      key: 3,
      name: "Joe Black",
      age: 42,
      address: "London No. 1 Lake Park"
    }
  },
  {
    key: 3,
    some: "baz",
    user: {
      key: 10,
      name: "Jim Green",
      age: 32,
      address: "Sidney No. 1 Lake Park"
    }
  },
  {
    key: 4,
    some: "text",
    user: {
      key: 21,
      name: "Jim Red",
      age: 32,
      address: "London No. 2 Lake Park"
    }
  }
];

interface AppState {
  searchText: string;
  searchedColumn: string;
}

interface AppProps {}

export default class App extends React.Component<AppProps, AppState> {
  state = {
    searchText: "",
    searchedColumn: ""
  };
  searchInput: any;

  getColumnSearchProps = (dataIndex: string) => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters
    }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={(node) => {
            this.searchInput = node;
          }}
          placeholder={`Search ${dataIndex}`}
          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 }}
          >
            Search
          </Button>
          <Button
            onClick={() => this.handleReset(clearFilters)}
            size="small"
            style={{ width: 90 }}
          >
            Reset
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered: any) => (
      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    onFilter: (value: any, record: any) =>
      record[dataIndex]
        ? JSON.stringify(record[dataIndex])
            .toLowerCase()
            .includes(value.toLowerCase())
        : "",
    onFilterDropdownVisibleChange: (visible: boolean) => {
      if (visible) {
        setTimeout(() => this.searchInput.select(), 100);
      }
    },
    render: (text: string, record: any, index: any) => {
      return JSON.stringify(record[dataIndex]);
    }
  });

  handleSearch = (selectedKeys: any, confirm: any, dataIndex: any) => {
    confirm();
    this.setState({
      searchText: selectedKeys[0],
      searchedColumn: dataIndex
    });
  };

  handleReset = (clearFilters: any) => {
    clearFilters();
    this.setState({ searchText: "" });
  };

  render() {
    const columns: ColumnsType<Group> = [
      {
        key: "some",
        title: "Some",
        dataIndex: "some",
        ...this.getColumnSearchProps("some")
      },
      {
        key: "user",
        title: "User",
        dataIndex: "user",
        ...this.getColumnSearchProps("user")
      }
    ];
    return <Table<Group> columns={columns} dataSource={data} />;
  }
}

在这里工作example

Answer 2

import {bookDetailDto} from "app/dto/bookDetailDto";

export interface BookdetailDto {
    myBook: string;
    bookDetailDto:bookDetailDto;
}

如果我按照BookdetailDto接口布局数据

[{
  myBook: 'some data',
  bookDetailDto: {
     ...
  }
}]

如果数据是这样的，那么没有 myDetails 键，那么 render 将是这样的 myBook 键

render: (text: any, res: any) => <span>{res.myBook}</span>

或

如果数据是这样的

[{
  myDesign: {
    myBook: 'some data',
    bookDetailDto: {
     ...
    }
  }
}]

那么列定义需要改成

[{
    title: 'My Book',
    dataIndex: 'myDesign',
    key: 'myDesign',
    ...this.getColumnSearchProps('myDesign'),
    render: (text: any, res: any) => <span>{res.myDetails.myBook}</span>,
},

并且渲染需要相应地更新。

注意：您可以通过在render函数中打印record来确认