[Antd] Cascader カスケード コンポーネントはトップ バーを追加します (dropdownRender 属性のない古いバージョンの antd の問題を解決するため)

背景

• フォームのカスケード メニューには、各レベルの意味を表すヘッダーを追加する必要があります。
  
• ご使用のantdバージョンがそれ以上の場合は4.4.0、属性のカスタマイズを直接使用できdropdownRender 、この記事を直接スキップできます。

パラメータ	説明する	タイプ	デフォルト値	バージョン
ドロップダウンレンダリング	ドロップダウン ボックスの内容をカスタマイズする	(メニュー: ReactNode) => ReactNode	-	4.4.0

• ブロガーの antd バージョンが低すぎてdropdownRender属性を使用できないため、別の方法を見つける必要があります。

成し遂げる

• コンポーネントコード

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>
	)
}

• スタイルコード: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;
}