【Antd】Cascader 级联组件添加顶部栏（解决低版 antd 无 dropdownRender 属性方案）

背景

• 表单级联菜单需要添加表头，用于表示各级含义。
  
• 如果你的antd版本大于等于4.4.0，则直接可以使用dropdownRender 属性自定义，本篇文章可以直接跳过。

参数	说明	类型	默认值	版本
dropdownRender	自定义下拉框内容	(menus: 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;
}