【避坑指“难”】Antd Cascader实现悬浮提示Tooltip功能

Antd文档看了几圈下来，没有给出直接配置悬浮提示Tooltip的入口，该功能和自定义新增功能差不多（【避坑指“难”】Antd Cascader实现自定义新增功能），需要重新修改下渲染逻辑。

核心代码

1、 对Cascader中的options进行遍历操作

 options={handleCascaderTooltips(options)}

handleCascaderTooltips()方法

export const handleCascaderTooltips = (opt: any) => {
  if (opt && opt.length) {
    opt.forEach((item: any) => {
      if (item.children && item.children.length) {
        item.fieldNames = item.value;
        item.children.forEach((child: any) => {
          let tempObj = {};
          tempObj = {
            label: (
              <Tooltip title={child.typeReferenceName ? child.typeReferenceName.split('.')[2] : ''}>
                {child.label}
              </Tooltip>
            ),
            value: child.value,
            fieldNames: child.value,
          };
          Object.assign(child, tempObj);
          if (child.children && child.children.length) {
            handleCascaderTooltips(child.children);
          }
        });
      } else {
        let tempObj = {};
        tempObj = {
          label: (
            <Tooltip title={item.typeReferenceName ? item.typeReferenceName.split('.')[2] : ''}>
              {item.label}
            </Tooltip>
          ),
          value: item.value,
          fieldNames: item.value,
        };
        Object.assign(item, tempObj);
      }
    });
  }
  return opt;
};

效果如下：

2、自定义Cascader中的displayRender的渲染逻辑

 displayRender={displayRender}

  const displayRender = (label: any, selectedOptions: any) => {
    const toolText = selectedOptions[selectedOptions.length - 1].typeReferenceName
      ? selectedOptions[selectedOptions.length - 1].typeReferenceName.split('.')[2]
      : 'String';
    return <Tooltip title={() => toolText}>{label[label.length - 1]}</Tooltip>;
  };

效果如下：