第一个 Component

5

5

ProTable页面少不了搜索，打算封装一个通过Requet获取数据，类似select2的下拉框

/src/compoments下面新建filter文件夹，下面新建selectBm.tsx

import

• compoments默认一层识别，可以修改tsconfig.json里"src/**/**/*"变为多层查找
• import selectBm from '@/components/Filter/selectBm，这里要注意：Filter/selectBm既代表Filter/selectBm/index.tsx，也代表Filter/selectBm.tsx
  TypeScript如何解析模块？

SelectBm.tsx

/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-console */
import { ProFormSelect } from '@ant-design/pro-form';
import request from 'umi-request';

// 定义返回类型
type Bm = {
  id: string;
  title: string;
};
// 获取数据的Promise
const getData = async () => {
  const data = request<{
    list: Bm[];
  }>(`api_url`, {
    params: {},
  }).then((res)=>{
    const option_array: any[] | PromiseLike<any[]> = [];
    res.list.forEach((item)=>{
      option_array.push({
        label:item.title,
        value:item.id,
      });
    });
    return option_array;
  });
  return data;
};
const SelectBm: React.FC = (props) => {
  return (
    <ProFormSelect
      name='xsbm_dm'
      showSearch
      placeholder="请选择部门"
      request={getData}
    >
    </ProFormSelect>
  );
};
export default SelectBm;

index.tsx

const columns: ProColumns<DataItem>[] = [
  {
    title: '销售部门',
    key: 'xsbm_dm',
    dataIndex: 'xsbm_dm',
    ellipsis: true,
    renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
      if (type === 'form') {
        return null;
      }
      return (
        <SelectBm/>
      );
    },
  },
  ...
];