Ant Design Select选择器 模糊查询

Select选择器  模糊查询

<Select
            showSearch
            placeholder="请选择"
            filterOption={false}
            optionFilterProp={‘children‘}
            loading={selectLoading1}
            onBlur={() => {
              productGetParams.title = ‘‘;
              productGetParams.page = 1;
              setProductOptions([]);
            }}
            onFocus={() => {
              getAssociatedProductsSelect({ page: 1, title: productGetParams.title });
            }}
            onSearch={(val: any) => onSearch(val, 1)}
            onPopupScroll={(e: any) => onScroll(e, 1)}
            onChange={(value: any) => {
              // props.getDetail({ id: value, type: 1 });
              setShopId(value)
            }}
          >
            {productOptions.map((item: any, index: any) => (
              <Select.Option key={index} value={item.id}>
                {item.title}
              </Select.Option>
            ))}
          </Select>

  

  /* 是否关联商品下拉框 */
  let timeout1: any = null;
  let productGetParams = { page: 1, title: ‘‘ }; // 获取数据的分页参数和搜索的值
  const [productOptions, setProductOptions] = useState<any>([]); // 下拉框的值
  const [hasMore1, setHasMore1] = useState<any>(true); // 是否有更多数据
  const [selectLoading1, setSelectLoading1] = useState<any>(false); // 加载状态

// 数组根据属性去重 const unique = (arr: any, u_key: any) => { let map = new Map(); arr.forEach((item: any, index: any) => { if (!map.has(item[u_key])) { map.set(item[u_key], item); } }); return [...map.values()]; }; //下拉框搜索 const onSearch = (val: any, type: any) => { if (type == 1) { productGetParams.page = 1; setProductOptions([]); getAssociatedProductsSelect({ page: 1, title: val }); } }; //下拉框滚动分页 const onScroll = (e: any, type: any) => { if (e.target.scrollTop + e.target.offsetHeight === e.target.scrollHeight) { if (hasMore1 && type == 1) { getAssociatedProductsSelect({...productGetParams,page:productGetParams.page+1}); } } }; // 获取 是否关联商品 的下拉数据 const getAssociatedProductsSelect = (params: any) => { if (timeout1) { clearTimeout(timeout1); timeout1 = null; } productGetParams.title = params.title; const fetch = () => { setSelectLoading1(true); props.dispatch({ type: `separate/list`, payload: params, callback: (res: any) => { setSelectLoading1(false); if (productGetParams.title == params.title) { if (res.error === 0) { if (res.data.length) { setProductOptions((old: any) => { if(params.page==1){ return unique([].concat(res.data), ‘id‘); }else { return unique(old.concat(res.data), ‘id‘); } }); if (((params.page-1) * 15+res.data.length) < res.total) { setHasMore1(true); } else { setHasMore1(false); } } } } }, }); }; timeout1 = setTimeout(() => { fetch(); }, 500); };

  

Ant Design Select选择器 模糊查询

上一篇:DB2&&oracle-培训内容


下一篇:记一次内存溢出异常