效果图:
代码:
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { TreeSelect } from "antd";
const { TreeNode } = TreeSelect;
class Demo extends React.Component {
state = {
defaultDataList: [], // 存所有的末级子节点
allPlaceholder: '全部',
};
onChange = (values) => {
const { defaultDataList } = this.state;
this.setState({ allPlaceholder: values.length === defaultDataList.length ? '全部' : null});
}
render() {
return (
<TreeSelect
dropdownStyle={
{ maxHeight: 400, overflow: 'auto' }}
treeData={deptTree}
allowClear
showSearch
treeNodeFilterProp="title"
multiple
treeCheckable
placeholder={placeholder || "请选择"}
treeDefaultExpandAll="true"
onChange={this.onChange}
maxTagCount={allPlaceholder ? 0 : 2}
maxTagPlaceholder={allPlaceholder}
/>
);
}
}
ReactDOM.render(<Demo />, document.getElementById("container"));
主要是maxTagCount和maxTagPlaceholder实现的