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

文章目录

    • 背景
    • 实现

背景

  • 表单级联菜单需要添加表头,用于表示各级含义。
    【Antd】Cascader 级联组件添加顶部栏(解决低版 antd 无 dropdownRender 属性方案)_第1张图片
  • 如果你的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;
}

你可能感兴趣的:(工作随记,前端,antd,cascader,dropdownRender)