-
Notifications
You must be signed in to change notification settings - Fork 1
/
3439-07911b779531f5c29136.js
1 lines (1 loc) · 267 KB
/
3439-07911b779531f5c29136.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3439],{46568:(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:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan",disabled:!0}]}]},{value:"120000",label:"Xinjiang",disabled:!0,children:[{value:"120100",label:"Bortala",children:[{value:"120111",label:"Alashankou"}]}]}]}),(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:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan",disabled:!0}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala",children:[{value:"120111",label:"Alashankou"}]}]}]}),(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,{})},h=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:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan"}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala"}]}]}),(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,{})},m=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[],options:[{value:"330000",label:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan"}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala",children:[{value:"120111",label:"Alashankou"}]}]}]}),(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:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan",disabled:!0}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala",children:[{value:"120111",label:"Alashankou"}]}]}]}),(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:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan",disabled:!0}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala",children:[{value:"120111",label:"Alashankou"}]}]}]})}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:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan"}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala",children:[{value:"120111",label:"Alashankou"}]}]},{value:"130000",label:"JiLin",children:[{value:"120100",label:"BaiSam",children:[{value:"120111",label:"JiangYuang"}]}]},{value:"140000",label:"JiLin",children:[{value:"120100",label:"BaiSam",children:[{value:"120111",label:"JiangYuang"}]}]},{value:"150000",label:"JiLin",children:[{value:"120100",label:"BaiSam",children:[{value:"120111",label:"JiangYuang"}]}]},{value:"160000",label:"NingXia",children:[{value:"120100",label:"BaiSam",children:[{value:"120111",label:"JiangYuang"}]}]}]}),(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:["Province","City","District"]})}}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:"Zhejiang",loadChildrenOnExpand:!0},{value:"120000",label:"Xinjiang",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:["Province","City","District"]})}}return(0,r.jsx)(n,{})},j=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{visible:!1,tabsVisible:!1,value:[],options:[{value:"330000",label:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan"}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala"}]}]}),(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:"Open"})]}),(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:"Open"})]})]})}}return(0,r.jsx)(n,{})},x=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{value:[],options:[{value:"330000",label:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan"}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala"}]}]}),(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:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan"}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala"}]}]}),(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:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",disabled:!0,children:[{value:"330206",label:"Longwan"}]},{value:"330300",label:"Ningbo",children:[{value:"330306",label:"Xihu"},{value:"330307",label:"YuHang"}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala"}]}]}),(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,{})},T=function(){var n=[{value:"330000",label:"Zhejiang",children:[{value:"330100",label:"Hangzhou",children:[{value:"330106",label:"Xihu"},{value:"330107",label:"YuHang"}]},{value:"330200",label:"Wenzhou",children:[{value:"330206",label:"Longwan"}]}]},{value:"120000",label:"Xinjiang",children:[{value:"120100",label:"Bortala"}]}];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:"Load options"})]})}}return(0,r.jsx)(s,{})};function I(n){return(0,r.jsx)(n.tag,k(k({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function z(n){return(0,r.jsx)(I,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function N(n){return(0,r.jsx)(I,{tag:"style",html:n.style})}function L(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),L(n.parentNode,s);return s}class M 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)(I,{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,L(s,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(N,{style:""}),p.createElement(z,{html:'<h2 class="anchor-heading"><a href="#cascader">¶</a><a href="javascript:void(0)" id="cascader" class="anchor-point"></a>Cascader</h2>\n<p>Cascader is used for cascade operation, e.g. cascade location selection.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),p.createElement(M,{title:"Basic Usage",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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">\'Alashankou\'</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(M,{title:"Loading Usage",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(M,{title:"Searchable Usage",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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">\'Alashankou\'</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(M,{title:"Multiple Usage",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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(h)),p.createElement(M,{title:"Multiple Search Usage",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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">\'Alashankou\'</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(m)),p.createElement(M,{title:"Scroll Loading Usage",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(M,{title:"Async Searchable Usage",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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">\'Alashankou\'</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(M,{title:"Disabled Usage",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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">\'Alashankou\'</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(M,{title:"City Cascader Usage",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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">\'Alashankou\'</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">\'JiLin\'</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">\'BaiSam\'</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">\'JiangYuang\'</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">\'JiLin\'</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">\'BaiSam\'</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">\'JiangYuang\'</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">\'JiLin\'</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">\'BaiSam\'</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">\'JiangYuang\'</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">\'NingXia\'</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">\'BaiSam\'</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">\'JiangYuang\'</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">\'Province\'</span><span class="token punctuation">,</span>\n <span class="token string">\'City\'</span><span class="token punctuation">,</span>\n <span class="token string">\'District\'</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(M,{title:"City Cascader Loading Usage",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">\'Zhejiang\'</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">\'Xinjiang\'</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">\'Province\'</span><span class="token punctuation">,</span> <span class="token string">\'City\'</span><span class="token punctuation">,</span> <span class="token string">\'District\'</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(M,{title:"Popup controlled mode",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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 <span class="token maybe-class-name">Open</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 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 <span class="token maybe-class-name">Open</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 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(M,{title:"Customize item rendering",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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(x)),p.createElement(M,{title:"Customize item list rendering",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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(M,{title:"Simplify selection",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Ningbo\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Xinjiang\'</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">\'Bortala\'</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(M,{title:"Load options dynamically",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">\'Zhejiang\'</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">\'Hangzhou\'</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">\'Xihu\'</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">\'YuHang\'</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">\'Wenzhou\'</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">\'Longwan\'</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">\'Xinjiang\'</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">\'Bortala\'</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 <span class="token maybe-class-name">Load</span> options\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(T)),p.createElement(z,{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> contains <code>MenuCascader</code> and <code>TabsCascader</code>, most of their APIS are shared.</p>\n<h3 class="anchor-heading"><a href="#shared-apis">¶</a><a href="javascript:void(0)" id="shared-apis" class="anchor-point"></a>Shared APIS</h3>\n<table class="table">\n<thead>\n<tr>\n<th>Props</th>\n<th>Description</th>\n<th>Type</th>\n<th>Required</th>\n<th>Default</th>\n<th>Alternatives</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Selected value</td>\n<td><code>CascaderValue[]</code></td>\n<td>No</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n<tr>\n<td>maxLine</td>\n<td>tags show lines</td>\n<td><code>number</code></td>\n<td>No</td>\n<td><code>null</code></td>\n<td></td>\n</tr>\n<tr>\n<td>lineHeight</td>\n<td>each line tag height</td>\n<td><code>number</code></td>\n<td>No</td>\n<td><code>22</code></td>\n<td></td>\n</tr>\n<tr>\n<td>options</td>\n<td>Optional data source</td>\n<td><code>ICascaderItem[]</code></td>\n<td>Yes</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when data changes</td>\n<td><code>(value: CascaderValue[], selectedOptions: ICascaderItem[], meta: ICascaderChangeMeta) => void</code></td>\n<td>No</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>loadOptions</td>\n<td>Function to load data dynamicly, must return a Promise</td>\n<td><code>(selectedOptions: ICascaderItem[], meta: ICascaderLoadMeta) => Promise<void></code></td>\n<td>No</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>changeOnSelect</td>\n<td>Trigger onChange on each selection</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder text of input box</td>\n<td><code>string</code></td>\n<td>No</td>\n<td><code>Please choose</code></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>Custom classname</td>\n<td><code>string</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>popupClassName</td>\n<td>Custom classname of popover</td>\n<td><code>string</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disable cascader</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>clearable</td>\n<td>Show clear button</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>visible</td>\n<td>Use with \n<code>onVisibleChange</code>\n to control open/close</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>Use with \n<code>visible</code></td>\n<td><code>(visible: boolean) => void</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>renderValue</td>\n<td>Render selected option value</td>\n<td><code>(selectedOptions: ICascaderItem[]) => string</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>renderItemContent</td>\n<td>Customize rendering of item content</td>\n<td><code>(node: ICascaderItem) => ReactNode</code></td>\n<td>No</td>\n<td><code>node.label</code></td>\n<td></td>\n</tr>\n<tr>\n<td>getItemTooltip</td>\n<td>Customize item tooltip</td>\n<td><code>(node: ICascaderItem) => string</code></td>\n<td>No</td>\n<td><code>node.label</code></td>\n<td></td>\n</tr>\n<tr>\n<td>renderList</td>\n<td>Customize rendering of item list</td>\n<td><code>(nodes: ICascaderItem[], renderItem: (node: ICascaderItem, style: CSSProperties) => ReactNode) => ReactNode</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\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">// Load children when expanding next level</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">// Load children when scrolling beyound bottom</span>\n<span class="token punctuation">}</span></code></pre>\n<h4 class="anchor-heading"><a href="#meta-object">¶</a><a href="javascript:void(0)" id="meta-object" class="anchor-point"></a>Meta object</h4>\n<p><code>onChange</code> and <code>loadOptions</code> has a <code>meta</code> parameter, you can use it to distinguish between different actions that trigger <code>onChange</code> or <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>Props</th>\n<th>Description</th>\n<th>Type</th>\n<th>Required</th>\n<th>Default</th>\n<th>Alternatives</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>multiple</td>\n<td>Multiple</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>multipleType</td>\n<td>Multiple type</td>\n<td><code>normal</code>\n \n<code>checkbox</code></td>\n<td>No</td>\n<td><code>normal</code></td>\n<td><code>checkbox</code></td>\n</tr>\n<tr>\n<td>expandTrigger</td>\n<td>Secondary menu expand trigger type</td>\n<td><code>string</code></td>\n<td>No</td>\n<td><code>click</code></td>\n<td><code>hover</code></td>\n</tr>\n<tr>\n<td>scrollable</td>\n<td>Can scroll load data dynamicly</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>loadChildrenOnScroll</td>\n<td>Load children when scrolling in first level</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>searchable</td>\n<td>Can search</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>async</td>\n<td>Can async search</td>\n<td><code>boolean</code></td>\n<td>No</td>\n<td><code>false</code></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>asyncFilter</td>\n<td>Async filter by keyword</td>\n<td><code>(keyword: string) => Promise<Array<ICascaderItem[]>></code></td>\n<td>No</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>filter</td>\n<td>Filter options by keyword</td>\n<td><code>(keyword: string, path: ICascaderItem[]) => boolean</code></td>\n<td>No</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>highlight</td>\n<td>Highlight options by keyword</td>\n<td><code>(keyword: string, path: ICascaderItem[]) => ReactNode</code></td>\n<td>No</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>limit</td>\n<td>Limit search result count</td>\n<td><code>number</code></td>\n<td>No</td>\n<td><code>50</code></td>\n<td></td>\n</tr>\n<tr>\n<td>renderTags</td>\n<td>Render tag list</td>\n<td><code>(props: ICascaderTagsProps) => ReactNode</code></td>\n<td>No</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>simplifySelection</td>\n<td>Merge similar selections</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>Merge similar selections, with disabled options</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>When <code>multiple</code> is <code>true</code>，<code>onChange</code> parameters such as <code>value</code> and <code>selectedOptions</code> are two dimensional arrays</li>\n<li><code>renderTags</code> is only available in multi select mode</li>\n<li>Use <code>scrollable</code> and <code>loadChildrenOnScroll</code> to control automatically loading data when scrolling to bottom</li>\n<li><code>simplifySelection</code> only works in <code>multiple</code> mode. There\'s also an extra <code>simplify</code> method in <code>meta</code> parameter for <code>onChange</code> in <code>multiple</code> mode</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>Props</th>\n<th>Description</th>\n<th>Type</th>\n<th>Required</th>\n<th>Default</th>\n<th>Alternatives</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>title</td>\n<td>Title of tabs</td>\n<td><code>ReactNode[]</code></td>\n<td>No</td>\n<td><code>[]</code></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#options-manipulate-functions">¶</a><a href="javascript:void(0)" id="options-manipulate-functions" class="anchor-point"></a>Options manipulate functions</h3>\n<p><code>Cascader</code> implements a few functions for manipulating <code>options</code>, these functions are not exported directly from <code>zent</code>, you need to manually import them from <code>zent/es/cascader/public-options-fns</code>. Check doc comments for detailed explaination for each function.</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}}]);