code.jsx

import React, { useState, useEffect } from "react";
import StyleDeptId from "styled-components";
import SplitPane from 'react-split-pane';
import "./splitSpane.scss";
import SearchDept from "./searchDept"
export default function Dept(props) {const [loading, setLoading] = useState(false);useEffect(() => {// init();}, []);return (<DeptWrap className="wrap">{/* <Spinspinning={loading}style={{width: '100%',height: "100%",}}></Spin> */}<SplitPane split="vertical" minSize={200} defaultSize={200}><div className="left"><SearchDept></SearchDept></div><div className="right">right</div></SplitPane></DeptWrap>);
}const DeptWrap = StyleDeptId.div`
display: flex;
height: 100%;
background: #ccc;
position: relative;
.left {background: pink;height: 100%;
}
.right {background: orange;height: 100%;
}
`;

splitSpane.scss

// react-split-pane的样式必须要
.Resizer {background: #000;opacity: 0.2;z-index: 1;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;-moz-background-clip: padding;-webkit-background-clip: padding;background-clip: padding-box;
}.Resizer:hover {-webkit-transition: all 2s ease;transition: all 2s ease;
}.Resizer.horizontal {height: 11px;margin: -5px 0;border-top: 5px solid rgba(255, 255, 255, 0);border-bottom: 5px solid rgba(255, 255, 255, 0);cursor: row-resize;width: 100%;
}.Resizer.horizontal:hover {border-top: 5px solid rgba(0, 0, 0, 0.5);border-bottom: 5px solid rgba(0, 0, 0, 0.5);
}.Resizer.vertical {width: 11px;margin: 0 -5px;border-left: 5px solid rgba(255, 255, 255, 0);border-right: 5px solid rgba(255, 255, 255, 0);cursor: col-resize;
}.Resizer.vertical:hover {border-left: 5px solid rgba(0, 0, 0, 0.5);border-right: 5px solid rgba(0, 0, 0, 0.5);
}
.Resizer.disabled {cursor: not-allowed;
}
.Resizer.disabled:hover {border-color: transparent;
}