@antdp/fuzzy-query v2.1.1

FuzzyQuery 模糊查询

依赖安装

 npm i @antdp/fuzzy-query

基本使用

import React from 'react';
import { Input, Col, InputNumber, Button, Select ,Form} from 'antd';
import FuzzyQuery from '@antdp/fuzzy-query';
import 'antd/dist/reset.css';

const Query =() => {
  const [value, setValue] = React.useState([])
  // 根据key模糊查询组织
  const selectLike = async () => {
     return Array.from({ length: 20 }).map((_, index) => {
        return {
          label: `名称---${index}`,
          phone: index,
        }
      })
  };
  return (
    <div>
      <FuzzyQuery
        request={selectLike}
        mode='multiple'
        value={value}
        onChange={setValue}
        placeholder="请选择"
        columns={[{ dataIndex: "label", title: "用户名" }, { dataIndex: "phone", title: "电话" }]}
        fieldNames={{ value: "phone" }}
      />
    </div>
  );
};
export default Query

延迟时间5s

import React from 'react';
import { Input, Col, InputNumber, Button, Select ,Form} from 'antd';
import FuzzyQuery from '@antdp/fuzzy-query';
import 'antd/dist/reset.css';

const Query =() => {
  const [value, setValue] = React.useState([])
  // 根据key模糊查询组织
  const selectLike = async () => {
     return Array.from({ length: 20 }).map((_, index) => {
        return {
          label: `名称---${index}`,
          phone: index,
        }
      })
  };
  return (
    <div>
      <FuzzyQuery
        request={selectLike}
        mode='multiple'
        value={value}
        onChange={setValue}
        placeholder="请选择"
        columns={[{ dataIndex: "label", title: "用户名" }, { dataIndex: "phone", title: "电话" }]}
        fieldNames={{ value: "phone" }}
        debounceTimeout={5000}
      />
    </div>
  );
};
export default Query

API

更多参数参考 antd5 Select组件