-
Notifications
You must be signed in to change notification settings - Fork 1
/
2476-92a15ef3f70d71450832.js
1 lines (1 loc) · 269 KB
/
2476-92a15ef3f70d71450832.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[2476],{84966:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>Z});var t=a(73450),p=a(27378),o=a(57318),e=a(63919),c=a(34365),l=a(3454),u=a(17912),r=a(24246);function i(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function k(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?i(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var d=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{options:[{value:"330000",label:"浙江省测试超出长度浙江省测试超出长度",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区",disabled:!0}]}]},{value:"120000",label:"新疆维吾尔自治区",disabled:!0,children:[{value:"120100",label:"博尔塔拉蒙古自治州",children:[{value:"120111",label:"阿拉山口市"}]}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})}))}render(){return(0,r.jsxs)("div",{style:{display:"flex",justifyContent:"space-between",paddingRight:"100px"},children:[(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"click",clearable:!0}),(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,clearable:!0,expandTrigger:"hover"})]})}}return(0,r.jsx)(n,{})},y=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{options:[{value:"330000",label:"Level1",loadChildrenOnExpand:!0},{value:"120000",label:"Level2",loadChildrenOnExpand:!0}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})})),(0,t.Z)(this,"loadOptions",((n,s)=>new Promise(((a,t)=>{var p=n[n.length-1];setTimeout((()=>{var t=[{value:"Dynamic".concat(p.value),label:"Dynamic".concat(p.label),loadChildrenOnExpand:n.length<2}];if("loadChildren"===s.action){var o=(0,u.d9)(this.state.options),e=(0,u.Mk)(o,n);e.children=t,e.loadChildrenOnExpand=!1,this.setState({options:o})}a()}),500)}))))}render(){return(0,r.jsx)(e.I,{clearable:!0,value:this.state.value,options:this.state.options,onChange:this.onChange,loadOptions:this.loadOptions,expandTrigger:"click",changeOnSelect:!0})}}return(0,r.jsx)(n,{})},g=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:["330000","330100","330106"],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区",disabled:!0}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州",children:[{value:"120111",label:"阿拉山口市"}]}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})}))}render(){return(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",clearable:!0,searchable:!0})}}return(0,r.jsx)(n,{})},m=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[["330000","330100","330106"],["330000","330100","330107"]],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区"}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州"}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})}))}render(){return(0,r.jsxs)("div",{children:[(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",multiple:!0,clearable:!0}),(0,r.jsx)("br",{}),(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",multiple:!0,multipleType:"normal",maxLine:1,clearable:!0}),(0,r.jsx)("br",{}),(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",multiple:!0,multipleType:"normal",maxLine:3,clearable:!0}),(0,r.jsx)("br",{}),(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",multiple:!0,multipleType:"normal",clearable:!0})]})}}return(0,r.jsx)(n,{})},h=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区"}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州",children:[{value:"120111",label:"阿拉山口市"}]}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})}))}render(){return(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",clearable:!0,multiple:!0,searchable:!0})}}return(0,r.jsx)(n,{})},v=function(){var n=Array(20).fill(null).map(((n,s)=>({value:String(s),label:"Option ".concat(s),loadChildrenOnExpand:!0,loadChildrenOnScroll:!0}))),s=0;class a extends p.Component{constructor(...a){super(...a),(0,t.Z)(this,"state",{options:n}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})})),(0,t.Z)(this,"loadOptions",((n,a)=>new Promise(((t,p)=>{var o=n.length<2;setTimeout((()=>{var p=(0,u.d9)(this.state.options);if("loadChildren"===a.action){var e=Array(10).fill(null).map(((n,a)=>(s++,{value:"Next ".concat(s),label:"Next ".concat(s),loadChildrenOnExpand:o,loadChildrenOnScroll:o}))),c=(0,u.Mk)(p,n);c.children=e,c.loadChildrenOnExpand=!1}else if("scroll"===a.action){var l=Array(10).fill(null).map(((n,a)=>(s++,{value:"Scroll ".concat(s),label:"Scroll ".concat(s),loadChildrenOnExpand:o,loadChildrenOnScroll:o})));if(n.length>0){var r=(0,u.Mk)(p,n);r.children=(r.children||[]).concat(l),r.loadChildrenOnScroll=r.children.length<30}else p=p.concat(l)}this.setState({options:p}),t(!0)}),5e3)}))))}render(){return(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,loadOptions:this.loadOptions,expandTrigger:"click",scrollable:!0,clearable:!0,loadChildrenOnScroll:this.state.options.length<=20})}}return(0,r.jsx)(a,{})},b=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区",disabled:!0}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州",children:[{value:"120111",label:"阿拉山口市"}]}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})})),(0,t.Z)(this,"asyncFilter",(n=>new Promise(((s,a)=>{setTimeout((()=>{var a=[[{value:"330000",label:"浙江省"},{value:"330100",label:"杭州市"},{value:"330101",label:"".concat(n,"-1")}],[{value:"330000",label:"浙江省"},{value:"330200",label:"温州市"},{value:"330201",label:"".concat(n,"-2")}]],t=(0,u.d9)(this.state.options);a.forEach((n=>(0,u.fv)(t,n))),this.setState({options:t}),s(a)}),500)}))))}render(){return(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",asyncFilter:this.asyncFilter,clearable:!0,searchable:!0,async:!0,multiple:!0})}}return(0,r.jsx)(n,{})},w=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:["330000","330100","330106"],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区",disabled:!0}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州",children:[{value:"120111",label:"阿拉山口市"}]}]}]})}render(){return(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,clearable:!0,searchable:!0,disabled:!0})}}return(0,r.jsx)(n,{})},f=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:["330000","330100","330106"],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区"}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州",children:[{value:"120111",label:"阿拉山口市"}]}]},{value:"130000",label:"吉林省",children:[{value:"120100",label:"白山市",children:[{value:"120111",label:"江源区"}]}]},{value:"140000",label:"吉林省",children:[{value:"120100",label:"白山市",children:[{value:"120111",label:"江源区"}]}]},{value:"150000",label:"吉林省",children:[{value:"120100",label:"白山市",children:[{value:"120111",label:"江源区"}]}]},{value:"160000",label:"宁夏回族自治区",children:[{value:"120100",label:"白山市",children:[{value:"120111",label:"江源区"}]}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})}))}render(){return(0,r.jsx)(c.c,{value:this.state.value,options:this.state.options,onChange:this.onChange,clearable:!0,title:["省","市","区"]})}}return(0,r.jsx)(n,{})},C=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[],options:[{value:"330000",label:"浙江省",loadChildrenOnExpand:!0},{value:"120000",label:"新疆维吾尔自治区",loadChildrenOnExpand:!0}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})})),(0,t.Z)(this,"loadOptions",(n=>new Promise(((s,a)=>{n[n.length-1],setTimeout((()=>{var a=[{value:"value-".concat(n.length),label:"label-".concat(n.length),loadChildrenOnExpand:n.length<2}],t=(0,u.d9)(this.state.options),p=(0,u.Mk)(t,n);p.children=a,p.loadChildrenOnExpand=!1,this.setState({options:t}),s()}),500)}))))}render(){return(0,r.jsx)(c.c,{value:this.state.value,options:this.state.options,onChange:this.onChange,loadOptions:this.loadOptions,changeOnSelect:!0,clearable:!0,title:["省","市","区"]})}}return(0,r.jsx)(n,{})},x=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{visible:!1,tabsVisible:!1,value:[],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区"}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州"}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})})),(0,t.Z)(this,"onVisibleChange",(n=>{this.setState({visible:n})})),(0,t.Z)(this,"onTabsVisibleChange",(n=>{this.setState({tabsVisible:n})}))}render(){return(0,r.jsxs)("div",{children:[(0,r.jsxs)("div",{style:{display:"flex"},children:[(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",visible:this.state.visible,onVisibleChange:this.onVisibleChange}),(0,r.jsx)(l.z,{style:{marginLeft:16},onClick:()=>this.onVisibleChange(!0),children:"打开"})]}),(0,r.jsxs)("div",{style:{display:"flex",marginTop:16},children:[(0,r.jsx)(c.c,{value:this.state.value,options:this.state.options,onChange:this.onChange,visible:this.state.tabsVisible,onVisibleChange:this.onTabsVisibleChange}),(0,r.jsx)(l.z,{style:{marginLeft:16},onClick:()=>this.onTabsVisibleChange(!0),children:"打开"})]})]})}}return(0,r.jsx)(n,{})},j=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区"}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州"}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})}))}render(){return(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{style:{display:"flex"},children:(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",renderItemContent:n=>(0,r.jsx)("span",{style:{fontStyle:"italic"},children:n.label}),getItemTooltip:n=>"".concat(n.label,"-").concat(n.value)})}),(0,r.jsx)("div",{style:{display:"flex",marginTop:16},children:(0,r.jsx)(c.c,{value:this.state.value,options:this.state.options,onChange:this.onChange,visible:this.state.tabsVisible,onVisibleChange:this.onTabsVisibleChange,renderItemContent:n=>(0,r.jsxs)("span",{children:[(0,r.jsx)("span",{style:{fontStyle:"italic",marginRight:"0.5em"},children:"custom"}),n.label]}),getItemTooltip:()=>{}})})]})}}return(0,r.jsx)(n,{})},O=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区"}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州"}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})}))}render(){return(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{style:{display:"flex"},children:(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",renderList:(n,s)=>(0,r.jsx)("div",{"data-x":"custom",children:n.map((n=>s(n)))})})}),(0,r.jsx)("div",{style:{display:"flex",marginTop:16},children:(0,r.jsx)(c.c,{value:this.state.value,options:this.state.options,onChange:this.onChange,visible:this.state.tabsVisible,onVisibleChange:this.onTabsVisibleChange,renderList:(n,s)=>(0,r.jsx)("div",{"data-x":"custom",children:n.map((n=>s(n)))})})})]})}}return(0,r.jsx)(n,{})},S=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[["330000","330100","330106"],["330000","330100","330107"]],options:[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",disabled:!0,children:[{value:"330206",label:"龙湾区"}]},{value:"330300",label:"宁波市",children:[{value:"330306",label:"西湖区"},{value:"330307",label:"余杭区"}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州"}]}]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})}))}render(){return(0,r.jsxs)("div",{children:[(0,r.jsx)("div",{children:(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",multiple:!0,simplifySelection:!0})}),(0,r.jsx)("div",{style:{marginTop:"16px"},children:(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",multiple:!0,simplifySelection:!0,simplifySelectionMode:"includeDisabled"})})]})}}return(0,r.jsx)(n,{})},I=function(){var n=[{value:"330000",label:"浙江省",children:[{value:"330100",label:"杭州市",children:[{value:"330106",label:"西湖区"},{value:"330107",label:"余杭区"}]},{value:"330200",label:"温州市",children:[{value:"330206",label:"龙湾区"}]}]},{value:"120000",label:"新疆维吾尔自治区",children:[{value:"120100",label:"博尔塔拉蒙古自治州"}]}];class s extends p.Component{constructor(...s){super(...s),(0,t.Z)(this,"state",{value:[["330000","330100","330106"],["330000","330100","330107"]],options:[]}),(0,t.Z)(this,"onChange",((n,s,a)=>{this.setState({value:n})})),(0,t.Z)(this,"loadOptions",(()=>{setTimeout((()=>{this.setState({options:n})}),200)}))}render(){return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.I,{value:this.state.value,options:this.state.options,onChange:this.onChange,expandTrigger:"hover",multiple:!0}),(0,r.jsx)(l.z,{style:{marginTop:16},onClick:this.loadOptions,children:"加载选项"})]})}}return(0,r.jsx)(s,{})};function T(n){return(0,r.jsx)(n.tag,k(k({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function E(n){return(0,r.jsx)(T,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function M(n){return(0,r.jsx)(T,{tag:"style",html:n.style})}function N(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),N(n.parentNode,s);return s}class D extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,s=this.props,a=s.title,t=s.src,p=s.children;return(0,r.jsxs)("div",{className:"zandoc-react-demo",children:[(0,r.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,r.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,r.jsx)("div",{className:"zandoc-react-demo__title",children:(0,r.jsx)("p",{children:a||""})}),(0,r.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,r.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,r.jsx)(T,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class Z extends p.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,o.l)(document.documentElement,0,N(s,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(M,{style:""}),p.createElement(E,{html:'<h2 class="anchor-heading"><a href="#cascader-ji-lian-xuan-ze">¶</a><a href="javascript:void(0)" id="cascader-ji-lian-xuan-ze" class="anchor-point"></a>Cascader 级联选择</h2>\n<p>可支持多级面板选取单个或多个值的选择器，最终录入对应值</p>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),p.createElement(D,{title:"菜单型级联",id:"Demo1",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// value: [\'330000\', \'330100\', \'330106\'],</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省测试超出长度浙江省测试超出长度\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'阿拉山口市\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">\'space-between\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">paddingRight</span><span class="token operator">:</span> <span class="token string">\'100px\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(d)),p.createElement(D,{title:"动态加载下一级",id:"Demo2",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> clone<span class="token punctuation">,</span> getNode <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent/es/cascader/public-options-fns\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'Level1\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'Level2\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">loadOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>\n <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> targetOption <span class="token operator">=</span> selectedOptions<span class="token punctuation">[</span>selectedOptions<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Dynamic</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>targetOption<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Dynamic</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>targetOption<span class="token punctuation">.</span><span class="token property-access">label</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> selectedOptions<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator"><</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>meta<span class="token punctuation">.</span><span class="token property-access">action</span> <span class="token operator">===</span> <span class="token string">\'loadChildren\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> newOptions <span class="token operator">=</span> <span class="token function">clone</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> node <span class="token operator">=</span> <span class="token function">getNode</span><span class="token punctuation">(</span>newOptions<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>\n node<span class="token punctuation">.</span><span class="token property-access">children</span> <span class="token operator">=</span> res<span class="token punctuation">;</span>\n <span class="token comment">// mark as loaded</span>\n node<span class="token punctuation">.</span><span class="token property-access">loadChildrenOnExpand</span> <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> newOptions<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">loadOptions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">loadOptions</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span>\n <span class="token attr-name">changeOnSelect</span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(y)),p.createElement(D,{title:"单选搜索",id:"Demo3",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330106\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'阿拉山口市\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">searchable</span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(g)),p.createElement(D,{title:"多选",id:"Demo4",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330106\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330107\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">multiple</span>\n <span class="token attr-name">clearable</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">multiple</span>\n <span class="token attr-name">multipleType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>normal<span class="token punctuation">"</span></span>\n <span class="token attr-name">maxLine</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">multiple</span>\n <span class="token attr-name">multipleType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>normal<span class="token punctuation">"</span></span>\n <span class="token attr-name">maxLine</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">multiple</span>\n <span class="token attr-name">multipleType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>normal<span class="token punctuation">"</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(m)),p.createElement(D,{title:"多选搜索",id:"Demo5",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'阿拉山口市\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">multiple</span>\n <span class="token attr-name">searchable</span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(h)),p.createElement(D,{title:"滚动加载",id:"Demo6",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> clone<span class="token punctuation">,</span> getNode <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent/es/cascader/public-options-fns\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">OPTIONS</span> <span class="token operator">=</span> <span class="token known-class-name class-name">Array</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token known-class-name class-name">String</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Option </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnScroll</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">let</span> optionId <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token constant">OPTIONS</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">loadOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>\n <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> nonLeaf <span class="token operator">=</span> selectedOptions<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator"><</span> <span class="token number">2</span><span class="token punctuation">;</span>\n\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">let</span> newOptions <span class="token operator">=</span> <span class="token function">clone</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>meta<span class="token punctuation">.</span><span class="token property-access">action</span> <span class="token operator">===</span> <span class="token string">\'loadChildren\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token known-class-name class-name">Array</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n optionId<span class="token operator">++</span><span class="token punctuation">;</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Next </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>optionId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Next </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>optionId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> nonLeaf<span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnScroll</span><span class="token operator">:</span> nonLeaf<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> node <span class="token operator">=</span> <span class="token function">getNode</span><span class="token punctuation">(</span>newOptions<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>\n node<span class="token punctuation">.</span><span class="token property-access">children</span> <span class="token operator">=</span> res<span class="token punctuation">;</span>\n <span class="token comment">// mark as loaded</span>\n node<span class="token punctuation">.</span><span class="token property-access">loadChildrenOnExpand</span> <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>meta<span class="token punctuation">.</span><span class="token property-access">action</span> <span class="token operator">===</span> <span class="token string">\'scroll\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token known-class-name class-name">Array</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">fill</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span>\n <span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n optionId<span class="token operator">++</span><span class="token punctuation">;</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Scroll </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>optionId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Scroll </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>optionId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> nonLeaf<span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnScroll</span><span class="token operator">:</span> nonLeaf<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 非第一级</span>\n <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>selectedOptions<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> node <span class="token operator">=</span> <span class="token function">getNode</span><span class="token punctuation">(</span>newOptions<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>\n node<span class="token punctuation">.</span><span class="token property-access">children</span> <span class="token operator">=</span> <span class="token punctuation">(</span>node<span class="token punctuation">.</span><span class="token property-access">children</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 最多加载 30 条数据</span>\n node<span class="token punctuation">.</span><span class="token property-access">loadChildrenOnScroll</span> <span class="token operator">=</span> node<span class="token punctuation">.</span><span class="token property-access">children</span><span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator"><</span> <span class="token number">30</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>\n newOptions <span class="token operator">=</span> newOptions<span class="token punctuation">.</span><span class="token method function property-access">concat</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> newOptions<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token comment">// 是否可继续加载更多</span>\n <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">loadOptions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">loadOptions</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span>\n <span class="token attr-name">scrollable</span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">loadChildrenOnScroll</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator"><=</span> <span class="token number">20</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(v)),p.createElement(D,{title:"异步搜索",id:"Demo7",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> clone<span class="token punctuation">,</span> insertPath <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent/es/cascader/public-options-fns\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'阿拉山口市\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">asyncFilter</span> <span class="token operator">=</span> <span class="token parameter">keyword</span> <span class="token arrow operator">=></span>\n <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> searchList <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330101\'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-1</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330201\'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>keyword<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-2</span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n <span class="token comment">// insert into options if missing</span>\n <span class="token keyword">const</span> options <span class="token operator">=</span> <span class="token function">clone</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n searchList<span class="token punctuation">.</span><span class="token method function property-access">forEach</span><span class="token punctuation">(</span><span class="token parameter">path</span> <span class="token arrow operator">=></span> <span class="token function">insertPath</span><span class="token punctuation">(</span>options<span class="token punctuation">,</span> path<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n options<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">resolve</span><span class="token punctuation">(</span>searchList<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">asyncFilter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">asyncFilter</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">searchable</span>\n <span class="token attr-name">async</span>\n <span class="token attr-name">multiple</span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(b)),p.createElement(D,{title:"禁用",id:"Demo8",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330106\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'阿拉山口市\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">searchable</span>\n <span class="token attr-name">disabled</span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(w)),p.createElement(D,{title:"城市级联",id:"Demo9",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">TabsCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330106\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'阿拉山口市\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'130000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'吉林省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'白山市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'江源区\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'140000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'吉林省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'白山市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'江源区\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'150000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'吉林省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'白山市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'江源区\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'160000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'宁夏回族自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'白山市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120111\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'江源区\'</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabsCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>\n <span class="token string">\'省\'</span><span class="token punctuation">,</span>\n <span class="token string">\'市\'</span><span class="token punctuation">,</span>\n <span class="token string">\'区\'</span>\n <span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(f)),p.createElement(D,{title:"城市级联动态加载",id:"Demo10",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">TabsCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> clone<span class="token punctuation">,</span> getNode <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent/es/cascader/public-options-fns\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">loadOptions</span> <span class="token operator">=</span> <span class="token parameter">selectedOptions</span> <span class="token arrow operator">=></span>\n <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>selectedOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> targetOption <span class="token operator">=</span> selectedOptions<span class="token punctuation">[</span>selectedOptions<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">value-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selectedOptions<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">label-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>selectedOptions<span class="token punctuation">.</span><span class="token property-access">length</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>\n <span class="token literal-property property">loadChildrenOnExpand</span><span class="token operator">:</span> selectedOptions<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator"><</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> newOptions <span class="token operator">=</span> <span class="token function">clone</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> node <span class="token operator">=</span> <span class="token function">getNode</span><span class="token punctuation">(</span>newOptions<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>\n node<span class="token punctuation">.</span><span class="token property-access">children</span> <span class="token operator">=</span> res<span class="token punctuation">;</span>\n node<span class="token punctuation">.</span><span class="token property-access">loadChildrenOnExpand</span> <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> newOptions<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabsCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">loadOptions</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">loadOptions</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">changeOnSelect</span>\n <span class="token attr-name">clearable</span>\n <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">\'省\'</span><span class="token punctuation">,</span> <span class="token string">\'市\'</span><span class="token punctuation">,</span> <span class="token string">\'区\'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(C)),p.createElement(D,{title:"弹层受控模式",id:"Demo11",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span><span class="token punctuation">,</span> <span class="token maybe-class-name">TabsCascader</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">visible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">tabsVisible</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onVisibleChange</span> <span class="token operator">=</span> <span class="token parameter">visible</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> visible <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onTabsVisibleChange</span> <span class="token operator">=</span> <span class="token parameter">visible</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">tabsVisible</span><span class="token operator">:</span> visible <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">visible</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onVisibleChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onVisibleChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">marginLeft</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onVisibleChange</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n 打开\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span><span class="token punctuation">,</span> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabsCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">tabsVisible</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onVisibleChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTabsVisibleChange</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>\n <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">marginLeft</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">onTabsVisibleChange</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n 打开\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(x)),p.createElement(D,{title:"自定义选项渲染",id:"Demo12",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span><span class="token punctuation">,</span> <span class="token maybe-class-name">TabsCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">renderItemContent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">node</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">\'italic\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>node<span class="token punctuation">.</span><span class="token property-access">label</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">getItemTooltip</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">node</span> <span class="token arrow operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>node<span class="token punctuation">.</span><span class="token property-access">label</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>node<span class="token punctuation">.</span><span class="token property-access">value</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span><span class="token punctuation">,</span> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabsCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">tabsVisible</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onVisibleChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTabsVisibleChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">renderItemContent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">node</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontStyle</span><span class="token operator">:</span> <span class="token string">\'italic\'</span><span class="token punctuation">,</span> <span class="token literal-property property">marginRight</span><span class="token operator">:</span> <span class="token string">\'0.5em\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n custom\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>\n <span class="token punctuation">{</span>node<span class="token punctuation">.</span><span class="token property-access">label</span><span class="token punctuation">}</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">getItemTooltip</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword nil">undefined</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(j)),p.createElement(D,{title:"自定义列表渲染",id:"Demo13",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span><span class="token punctuation">,</span> <span class="token maybe-class-name">TabsCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">renderList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">nodes<span class="token punctuation">,</span> renderItem</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>nodes<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">node</span> <span class="token arrow operator">=></span> <span class="token function">renderItem</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">display</span><span class="token operator">:</span> <span class="token string">\'flex\'</span><span class="token punctuation">,</span> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TabsCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">tabsVisible</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onVisibleChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onTabsVisibleChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">renderList</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">nodes<span class="token punctuation">,</span> renderItem</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">data-x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>nodes<span class="token punctuation">.</span><span class="token method function property-access">map</span><span class="token punctuation">(</span><span class="token parameter">node</span> <span class="token arrow operator">=></span> <span class="token function">renderItem</span><span class="token punctuation">(</span>node<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(O)),p.createElement(D,{title:"合并展示选项",id:"Demo14",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330106\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330107\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">disabled</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330300\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'宁波市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330306\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330307\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>meta<span class="token punctuation">.</span><span class="token method function property-access">simplify</span><span class="token punctuation">(</span>selectedOptions<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">multiple</span>\n <span class="token attr-name">simplifySelection</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token string">\'16px\'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">multiple</span>\n <span class="token attr-name">simplifySelection</span>\n <span class="token attr-name">simplifySelectionMode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>includeDisabled<span class="token punctuation">"</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(S)),p.createElement(D,{title:"动态加载选项",id:"Demo15",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MenuCascader</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token constant">OPTIONS</span> <span class="token operator">=</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'浙江省\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'杭州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330106\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'西湖区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330107\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'余杭区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330200\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'温州市\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'330206\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'龙湾区\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120000\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'新疆维吾尔自治区\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">\'120100\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">\'博尔塔拉蒙古自治州\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Simple</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330106\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token string">\'330000\'</span><span class="token punctuation">,</span> <span class="token string">\'330100\'</span><span class="token punctuation">,</span> <span class="token string">\'330107\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> selectedOptions<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">loadOptions</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token constant">OPTIONS</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">MenuCascader</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">value</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">options</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">options</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChange</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">expandTrigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hover<span class="token punctuation">"</span></span>\n <span class="token attr-name">multiple</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">loadOptions</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n 加载选项\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Simple</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(I)),p.createElement(E,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<p><code>Cascader</code> 包含 <code>MenuCascader</code> 及 <code>TabsCascader</code>，它们大部分 API 是共用的。</p>\n<h3 class="anchor-heading"><a href="#gong-yong-de-api">¶</a><a href="javascript:void(0)" id="gong-yong-de-api" class="anchor-point"></a>共用的 API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>是否必填</th>\n<th>默认值</th>\n<th>备选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>级联的选中值</td>\n<td><code>CascaderValue[]</code></td>\n<td>否</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n<tr>\n<td>maxLine</td>\n<td>数据显示几行</td>\n<td><code>number</code></td>\n<td>否</td>\n<td><code>null</code></td>\n<td></td>\n</tr>\n<tr>\n<td>lineHeight</td>\n<td>每行的行高，乘以maxLine即为显示面板的高度，用于解决自定义renderValue时高度不适配</td>\n<td><code>number</code></td>\n<td>否</td>\n<td><code>22</code></td>\n<td></td>\n</tr>\n<tr>\n<td>options</td>\n<td>可选项数据源</td>\n<td><code>ICascaderItem[]</code></td>\n<td>是</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>选择完成后的回调</td>\n<td><code>(value: CascaderValue[], selectedOptions: ICascaderItem[], meta: ICascaderChangeMeta) => void</code></td>\n<td>是</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>loadOptions</td>\n<td>动态加载级联的数据</td>\n<td><code>(selectedOptions: ICascaderItem[], meta: ICascaderLoadMeta) => Promise<void></code></td>\n<td>否</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>changeOnSelect</td>\n<td>是否选择即时触发改变</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>输入框占位文本</td>\n<td><code>string</code></td>\n<td>否</td>\n<td><code>请选择</code></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>自定义额外类名</td>\n<td><code>string</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>popover 自定义类名</td>\n<td><code>string</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>是否禁用</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>clearable</td>\n<td>显示清除按钮</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>和 \n<code>onVisibleChange</code>\n 一起使用时 \n<code>Cascader</code>\n 的打开关闭状态完全由外部控制</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>配合 \n<code>visible</code>\n 一起使用</td>\n<td><code>(visible: boolean) => void</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>renderValue</td>\n<td>渲染选中中的一个选项值</td>\n<td><code>(selectedOptions: ICascaderItem[]) => string</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>renderItemContent</td>\n<td>自定义渲染选项内容</td>\n<td><code>(node: ICascaderItem) => ReactNode</code></td>\n<td>否</td>\n<td><code>node.label</code></td>\n<td></td>\n</tr>\n<tr>\n<td>getItemTooltip</td>\n<td>自定义选项的 tooltip</td>\n<td><code>(node: ICascaderItem) => string</code></td>\n<td>否</td>\n<td><code>node.label</code></td>\n<td></td>\n</tr>\n<tr>\n<td>renderList</td>\n<td>自定义渲染选项列表</td>\n<td><code>(nodes: ICascaderItem[], renderItem: (node: ICascaderItem, style: CSSProperties) => ReactNode) => ReactNode</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>对于 <code>MenuCascader</code> <code>changeOnSelect</code> 仅在单选模式且子菜单展开方式为 <code>click</code> 时才生效。</li>\n</ul>\n<h4 class="anchor-heading"><a href="#icascaderitem">¶</a><a href="javascript:void(0)" id="icascaderitem" class="anchor-point"></a>ICascaderItem</h4>\n<pre><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">ICascaderItem</span> <span class="token punctuation">{</span>\n value<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">;</span>\n label<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>\n children<span class="token operator">?</span><span class="token operator">:</span> ICascaderItem<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n disabled<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>\n loadChildrenOnExpand<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 展开下一级时触发加载数据</span>\n loadChildrenOnScroll<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span> <span class="token comment">// 滚动时触发加载数据</span>\n<span class="token punctuation">}</span></code></pre>\n<h4 class="anchor-heading"><a href="#meta-can-shu">¶</a><a href="javascript:void(0)" id="meta-can-shu" class="anchor-point"></a>Meta 参数</h4>\n<p><code>ICascaderChangeMeta</code> 和 <code>ICascaderLoadMeta</code> 用于区分触发 <code>onChange</code> 和 <code>loadOptions</code> 的场景，使用时根据不同触发场景坑需要做不同逻辑处理。例如 <code>loadOptions</code> 可能是由于展开下一级或者滚动时触发的。</p>\n<h3 class="anchor-heading"><a href="#menucascader">¶</a><a href="javascript:void(0)" id="menucascader" class="anchor-point"></a>MenuCascader</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>是否必填</th>\n<th>默认值</th>\n<th>备选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>multiple</td>\n<td>是否支持多选</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>multipleType</td>\n<td>多选类型</td>\n<td><code>normal</code>\n \n<code>checkbox</code></td>\n<td>否</td>\n<td><code>normal</code></td>\n<td><code>checkbox</code></td>\n</tr>\n<tr>\n<td>expandTrigger</td>\n<td>次级菜单的展开方式</td>\n<td><code>string</code></td>\n<td>否</td>\n<td><code>click</code></td>\n<td><code>hover</code></td>\n</tr>\n<tr>\n<td>scrollable</td>\n<td>是否支持滚动加载</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>loadChildrenOnScroll</td>\n<td>第一级数据是否还有更多数据</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>searchable</td>\n<td>是否显示搜索框</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>async</td>\n<td>是否异步搜索</td>\n<td><code>boolean</code></td>\n<td>否</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>asyncFilter</td>\n<td>根据关键词异步搜索</td>\n<td><code>(keyword: string) => Promise<Array<ICascaderItem[]>></code></td>\n<td>否</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>filter</td>\n<td>根据关键词进行过滤</td>\n<td><code>(keyword: string, path: ICascaderItem[]) => boolean</code></td>\n<td>否</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>highlight</td>\n<td>根据关键词高亮每一项</td>\n<td><code>(keyword: string, path: ICascaderItem[]) => ReactNode</code></td>\n<td>否</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>limit</td>\n<td>搜索结果展示数量</td>\n<td><code>number</code></td>\n<td>否</td>\n<td><code>50</code></td>\n<td></td>\n</tr>\n<tr>\n<td>renderTags</td>\n<td>自定义标签列表整体的展示</td>\n<td><code>(props: ICascaderTagsProps) => ReactNode</code></td>\n<td>否</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>simplifySelection</td>\n<td>多选时合并展示同级节点，参考下面的说明</td>\n<td><code>boolean</code></td>\n<td><code>否</code></td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>simplifySelectionMode</td>\n<td>多选时合并展示同级节点时，是否排除disabled项的干扰</td>\n<td><code>string</code></td>\n<td><code>否</code></td>\n<td><code>excludeDisabled</code></td>\n<td><code>includeDisabled</code></td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>当 <code>multiple</code> 为 <code>true</code> 时，<code>onChange</code> 中的 <code>value</code> 及 <code>selectedOptions</code> 为二维数组</li>\n<li><code>renderTags</code> 仅当多选模式下有效</li>\n<li>组件参数 <code>scrollable</code> 与节点的 <code>loadChildrenOnScroll</code> 属性组合可判断它的子节点是否需要滚动加载更多数据；第一个层级由于无父节点，使用 <code>props</code> 上的 <code>loadChildrenOnScroll</code> 参数</li>\n<li><code>simplifySelection</code> 仅当 <code>multiple</code> 为 <code>true</code> 时生效。举例来说，开启后当四川省下所有的市都被选中时，输入框中仅展示四川省，不会展开各个具体的市。另外，多选模式下 <code>onChange</code> 的 <code>meta</code> 参数中会多一个 <code>simplify</code> 方法，可以用来合并选中的选项。</li>\n</ul>\n<h3 class="anchor-heading"><a href="#tabscascader">¶</a><a href="javascript:void(0)" id="tabscascader" class="anchor-point"></a>TabsCascader</h3>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>是否必填</th>\n<th>默认值</th>\n<th>备选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>弹层中每一级的标题文案</td>\n<td><code>ReactNode[]</code></td>\n<td>否</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#options-chu-li-han-shu">¶</a><a href="javascript:void(0)" id="options-chu-li-han-shu" class="anchor-point"></a>Options 处理函数</h3>\n<p><code>Cascader</code> 实现了部分常用的操作 <code>options</code> 的函数，这些函数没有在 <code>zent</code> 里直接导出，如需使用需要从 <code>zent/es/cascader/public-options-fns</code> 引入。函数具体说明文档参考各自的文档注释，编辑器有提示。</p>\n<ul>\n<li><code>clone(options: ICascaderItem[]): ICascaderItem[]</code></li>\n<li><code>insertPath(options: ICascaderItem[], path: ICascaderItem[]): ICascaderItem[]</code></li>\n<li><code>getNode(options: ICascaderItem[], path: ICascaderItem[]): ICascaderItem | null</code></li>\n<li><code>merge(options: ICascaderItem[], another: ICascaderItem[]): ICascaderItem[]</code></li>\n</ul>'}))}}},17912:(n,s,a)=>{"use strict";a.d(s,{d9:()=>o,fv:()=>e,Mk:()=>c});var t=a(59312),p=a(76187);function o(n){return(0,p.d9)(n,l)}function e(n,s){return(0,p.fv)(n,s,l)}function c(n,s){for(var a=null,t=n,p=function(n){var p=s[n].value;if(!(a=t.find((function(n){return n.value===p}))))return{value:null};t=a.children},o=0;o<s.length;o++){var e=p(o);if("object"==typeof e)return e.value}return a}function l(n){return(0,t.pi)((0,t.pi)({},n),{children:[]})}},85883:(n,s,a)=>{"use strict";var t=a(92497);s.Z=t.Z}}]);