Fatal编程技术网
  • typescript/
  • Typescript Ant design Table dataIndex在搜索选项启用时不适用于

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

typescript

Typescript Ant design Table dataIndex在搜索选项启用时不适用于,typescript,antd,Typescript,Antd,我使用ant的react-type脚本项目进行表搜索。但是表搜索dataIndex不起作用，有什么解决办法吗 { title: 'My Book', dataIndex: 'myBook', key: 'myBook', ...this.getColumnSearchProps('myBook'), render: (text: any, res: any) => <span>{res.myDetails.myBook}</spa

我使用ant的react-type脚本项目进行表搜索。但是表搜索
dataIndex
不起作用，有什么解决办法吗

{
    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()}
/>

record.myBook.toString（）}
/>
如果我按照
BookdetailDto
界面布局数据

[{
myBook:“一些数据”，
书籍详情：{
...
}
}]
如果数据是这样的，那么就没有myDetails键，那么
render
对于
myBook
键将是这样的

render:（text:any，res:any）=>{res.myBook}
或

如果数据是这样的

[{
  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>,
},

[{
书名：“我的书”，
数据索引：“myDesign”，
关键字：“myDesign”，
…此.getColumnSearchProps（'myDesign'），
render：（text:any，res:any）=>{res.myDetails.myBook}，
},
渲染需要相应地更新

注意：您可以通过在
渲染
功能中打印
记录
进行确认

如果我按照
BookdetailDto
界面布局数据

[{
myBook:“一些数据”，
书籍详情：{
...
}
}]
如果数据是这样的，那么就没有myDetails键，那么
render
对于
myBook
键将是这样的

render:（text:any，res:any）=>{res.myBook}
或

如果数据是这样的

[{
  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>,
},

[{
书名：“我的书”，
数据索引：“myDesign”，
关键字：“myDesign”，
…此.getColumnSearchProps（'myDesign'），
render：（text:any，res:any）=>{res.myDetails.myBook}，
},
渲染需要相应地更新

注意：例如，您可以通过在
渲染
功能中打印
记录
进行确认创建示例
用户界面和
组
界面


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} />;
  }
}



import*as React from“React”；
从“antd”导入{表、输入、按钮、空格}；
从“antd/es/table”导入{ColumnsType}；
从“@ant design/icons”导入{SearchOutlined}”；
导入“antd/dist/antd.css”；
导入“/styles.css”；
界面用户{
关键词：数字；
名称：字符串；
年龄：人数；
地址：字符串；
}
接口组{
关键词：数字；
一些：弦；
用户：用户；
}
常量数据：组[]=[
{
重点:1,，
一些人说：“福”，
用户：{
关键词：9，
姓名：“约翰·布朗”，
年龄:32岁，
地址：“纽约第一湖公园”
}
},
{
重点:二,，
一些：“酒吧”，
用户：{
重点:三,，
姓名：“乔·布莱克”，
年龄:42,，
地址：“伦敦第一湖公园”
}
},
{
重点:三,，
一些人：“baz”，
用户：{
关键词：10，
姓名：“吉姆·格林”，
年龄:32岁，
地址：“悉尼第一湖公园”
}
},
{
重点:四,，
一些：“文本”，
用户：{
关键词：21，
姓名：“吉姆·瑞德”，
年龄:32岁，
地址：“伦敦第二湖公园”
}
}
];
接口应用状态{
searchText:string；
searchedColumn：字符串；
}
接口AppProps{}

例如，导出默认类应用程序扩展了React.Component
创建示例
用户界面和
组
界面


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} />;
  }
}



import*as React from“React”；
从“antd”导入{表、输入、按钮、空格}；
从“antd/es/table”导入{ColumnsType}；
从“@ant design/icons”导入{SearchOutlined}”；
导入“antd/dist/antd.css”；
导入“/styles.css”；
界面用户{
关键词：数字；
名称：字符串；
年龄：人数；
地址：字符串；
}
接口组{
关键词：数字；
一些：弦；
用户：用户；
}
常量数据：组[]=[
{
重点:1,，
一些人说：“福”，
用户：{
关键词：9，
姓名：“约翰·布朗”，
年龄:32岁，
地址：“纽约第一湖公园”
}
},
{
重点:二,，
一些：“酒吧”，
用户：{
重点:三,，
姓名：“乔·布莱克”，
年龄:42,，
地址：“伦敦第一湖公园”
}
},
{
重点:三,，
一些人：“baz”，
用户：{
关键词：10，
姓名：“吉姆·格林”，
年龄:32岁，
地址：“悉尼第一湖公园”
}
},
{
重点:四,，
一些：“文本”，
用户：{
关键词：21，
姓名：“吉姆·瑞德”，
年龄:32岁，
地址：“伦敦第二湖公园”
}
}
];
接口应用状态{
searchText:string；
searchedColumn：字符串；
}
接口AppProps{}

导出默认类应用程序扩展了React.Component
你确定点符号在这种情况下有效吗？@captain yossarian您好，我尝试使用
myBook
，但同样的冲突很难说，没有可复制的示例（@captain yossarian Hi，我更新了我的问题你确定
dataSource
有
myBook
属性吗？你确定点符号在这种情况下有效吗？@captain yossarian您好，我试着使用
myBook
，但同样的冲突很难说，没有可复制的例子（@captain yossarian Hi，我更新了我的问题你确定
dataSource
有
myBook
属性吗？但不幸的是，我的数据正在使用~myDetails.dto~@core114更新dataSource以便它可以匹配你的数据吗？如果你不能共享数据，请不要复制你的数据，只要更新dataSource中的一些行以匹配你的数据即可更新我的question@core114你也可以更新你的hi吗？我试图添加它，但无法将stazkblitz添加到.dto文件，但不幸的是，我的数据正在使用~myDetails.dto~@core114更新dataSource以便它可以匹配你的数据吗？如果你无法共享数据，请不要复制你的数据，只要更新dataSource中的一些行以匹配你的数据即可。嗨，我更新了我的question@core114你也能更新你的hi吗，我试着添加了它，不能将stazkblitz添加到.dto文件中