效果图
<div id="container" style="padding: 24px"></div> <script> var mountNode = document.getElementById('container'); </script> 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 = { values: [], titles: [] }; onChange = (values, titles, extra) => { console.log(values); this.setState({ values, titles }); }; render() { let { values, titles } = this.state; let placeholder = ""; if (titles.length === 1) { placeholder = titles[0]; } else { placeholder = `苏南${titles.length}市`; } return ( <TreeSelect multiple showSearch allowClear treeCheckable treeDefaultExpandAll value={values} onChange={this.onChange} maxTagCount={0} maxTagPlaceholder={placeholder} placeholder="Please select" style={{ width: "100%" }} dropdownStyle={{ maxHeight: 400, overflow: "auto" }} > <TreeNode value="0" title="苏锡常"> <TreeNode value="1" title="苏州" style={{ marginLeft: -18 }} /> <TreeNode value="2" title="无锡" style={{ marginLeft: -18 }} /> <TreeNode value="3" title="常州" style={{ marginLeft: -18 }} /> </TreeNode> </TreeSelect> ); } } ReactDOM.render(<Demo />, document.getElementById("container"));
