[Antd] Cascader cascading component adds a top bar (to solve the problem of low version of antd without dropdownRender attribute)

background

• The form cascading menu needs to add a header to express the meaning of each level.
  
• If your antdversion is greater than or equal to it 4.4.0, you can directly use dropdownRender attribute customization, and you can skip this article directly.

parameter	illustrate	type	default value	Version
dropdownRender	Customize drop-down box content	(menus: ReactNode) => ReactNode	-	4.4.0

• Since the blogger's antd version is too low and cannot use dropdownRenderattributes, he has to find another way.

accomplish

• component code

import {
    
     Cascader} from 'antd';
import React, {
    
     useState } from 'react';
import './index.css';
export default function(){
    
    
	const [popupVisible, setPopupVisible] = useState(false);
	return (
		<div>
			<div className="navSpacePopup-container" style={
    
    {
    
     display: popupVisible ? 'block' : 'none' }}>
        		<div className="header">
          			<span>部门</span>
          			<span>产品</span>
          			<span>业务</span>
        		</div>
        		<div className="body" />
        		<div className="footer" />
      		</div>
			<Cascader 
				options={
    
    options}
				popupClassName={
    
    'navSpacePopup'}
				showSearch={
    
    true}
                onSearch={
    
    (search) => {
    
    
                  const uls: any = document.querySelector('.navSpacePopup .ant-cascader-menus .ant-cascader-menu');
                  if (search) {
    
    
                    uls.style.width = '100%';
                  } else {
    
    
                    uls.style.width = '33%';
                  }
                }}
				getPopupContainer={
    
    () => document.querySelector('.navSpacePopup-container .body')}
				onPopupVisibleChange={
    
    (val) => setPopupVisible(val)}
			/>
		</div>
	)
}

• Style code:index.css

.navSpacePopup-container {
    
    
  /* 通过绝对定位使级联下拉框定位到级联组件下面 */
  position: absolute;
  top: 224px;
  right: 25px;
  width: 65%;
  height: 210px;
  /* 设置高层级，避免被遮盖 */
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
}
.navSpacePopup-container .header {
    
    
  width: 100%;
  height: 32px;
  line-height: 32px;
  display: grid;
  /* 级联有3级就设置 3列 */
  grid-template-columns: auto auto auto;
  /* 表头居中 */
  text-align: center;
}
.navSpacePopup-container .footer {
    
    
  width: 100%;
  height: 32px;
  line-height: 32px;
}
.navSpacePopup-container .body {
    
    
  width: 100%;
  height: 248px;
}
.navSpacePopup-container .body > div {
    
    
  position: relative !important;
}

.navSpacePopup {
    
    
  width: 100%;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  box-shadow: none;
}
.navSpacePopup .ant-cascader-menus .ant-cascader-menu {
    
    
  /* 设置每一级菜单的宽，100% / 几级（ 100% / 3 = 33% ） */
  width: 33%;
}

.navSpacePopup .ant-cascader-menus .ant-cascader-menu .ant-cascader-menu-item .ant-cascader-menu-item-content {
    
    
  /* 必要样式，移除默认组件样式 */
  flex: none !important;
}
.navSpacePopup .ant-cascader-menus .ant-cascader-menu .ant-cascader-menu-item {
    
    
  display: flex;
  justify-content: space-between;
}
.navSpacePopup .ant-cascader-menus .ant-cascader-menu {
    
    
  /* 必要样式，移除默认组件样式 */
  flex-grow: inherit;
}