优化antd-select多选title展示，鼠标移入展示选中的名字

react-hooks-ts-antd-select多选title鼠标移入展示选中的名字封装

先看效果图

鼠标移入： 数据展示:

index.tsx

import { maxTagPlaceholder } from "utils/antdCommonRenders";

<Select
    mode="multiple"
    maxTagCount={2}
    maxTagPlaceholder={(res: any) => {
      return maxTagPlaceholder(res);
    }}
    showSearch
    allowClear
    placeholder="请选择"
    optionFilterProp="children"
    >
    {xxxList.map((item) => {
      return (
        <Option key={item.id} value={item.id}>{item.name}</Option>
      );
    })}
    </Select>

utils/antdCommonRenders.ts

export const maxTagPlaceholder: any = (
  res: any = [],
  showName = "label"/* 要展示的字段名称 */,
  titleLineNumber = 3/* title每3个就换一行比较好看，
  如果不需要可以改为100000或者删除底下相对应的逻辑 */
) => {
  let lengths = res.length;
  return (
    <span
      title={res
        .map((item: any, index: number) => {
          let canshu = item[showName];
          if (index !== lengths - 1) {
            if ((index + 1) % titleLineNumber === 0) {
              canshu += `,
`; //这里特意留的换行符 不要格式化！这样title会换行比较好看 一定要在本行的最开始!
            } else {
              canshu += ",";
            }
          }
          return canshu;
        })
        .join("")}
    >
      <span>+</span>
      <span style={{ margin: "0 5px" }}>{res.length}</span>
      <span>...</span>
    </span>
  );
};