@@ -5,21 +5,19 @@ desc: 默认样式
55---
66
77``` jsx
8-
9- import React , { useState , useEffect } from ' react' ;
10- import { CCascader , Tooltip , Icon } from ' cloud-react' ;
11- const addressOptions = [
8+ import React , { useState , useEffect } from " react" ;
9+ import { CCascader , Tooltip , Icon } from " cloud-react" ;
10+ const addressOptions = [
1211 {
13- value: ' zhejiang' ,
14- label: ' Zhejiang' ,
15- info: ' 说明' ,
16-
12+ value: " zhejiang" ,
13+ label: " Zhejiang" ,
14+ info: " 说明" ,
1715
1816 children: [
1917 {
20- value: ' hangzhou' ,
21- label: ' Hangzhou' ,
22- info: ' 说明 ' ,
18+ value: " hangzhou" ,
19+ label: " Hangzhou" ,
20+ info: " 说明 " ,
2321 children: [
2422 {
2523 value: " xihu" ,
@@ -124,42 +122,48 @@ export default function Demo() {
124122 );
125123 };
126124
127- return (
128- < div>
129- < div style= {{ marginBottom: 24 }}> 仅叶子选项支持选择< / div>
130- < CCascader
131- options= {addressOptions}
132- onChange= {onChange}
133- placeholder= " Please select"
134- style= {{ width: 328 }}
135- optionRender= {option => {
136- return (
137- < label title= {option .title } style= {{ display: ' flex' , gap: 4 }}>
138- {option .label }
139- {option .info && (
140- < Tooltip content= {option .info } theme= " light" placement= " right" overlayStyle= {{ zIndex: 10000 }}>
141- < Icon type= " question-circle" / >
142- < / Tooltip>
143- )}
144- < / label>
145- );
146- }}
147- / >
148- < div style= {{ marginBottom: 24 , marginTop: 40 }}> 任意选项支持选择< / div>
149- < CCascader
150- options= {addressOptions}
151- onChange= {onChange}
152- placeholder= " Please select"
153- showSearch= {{ filter: filter }}
154- style= {{ width: 328 }}
155- changeOnSelect/ >
156- < div style= {{ marginBottom: 24 , marginTop: 40 }}> 用级联组件展示地址< / div>
157- {
158- ! loading && < CCascader
159- options= {data}
160- onChange= {onChange}
161- fieldNames= {{ label: ' name' , value: ' id' , children: ' children' }}
162- placeholder= " Please select"
125+ return (
126+ < div>
127+ < div style= {{ marginBottom: 24 }}> 仅叶子选项支持选择< / div>
128+ < CCascader
129+ options= {addressOptions}
130+ onChange= {onChange}
131+ placeholder= " Please select"
132+ style= {{ width: 328 }}
133+ optionRender= {(option ) => {
134+ return (
135+ < label title= {option .title } style= {{ display: " flex" , gap: 4 }}>
136+ {option .label }
137+ {option .info && (
138+ < Tooltip
139+ content= {option .info }
140+ theme= " light"
141+ placement= " right"
142+ overlayStyle= {{ zIndex: 10000 }}
143+ >
144+ < Icon type= " question-circle" / >
145+ < / Tooltip>
146+ )}
147+ < / label>
148+ );
149+ }}
150+ / >
151+ < div style= {{ marginBottom: 24 , marginTop: 40 }}> 任意选项支持选择< / div>
152+ < CCascader
153+ options= {addressOptions}
154+ onChange= {onChange}
155+ placeholder= " Please select"
156+ showSearch= {{ filter: filter }}
157+ style= {{ width: 328 }}
158+ changeOnSelect
159+ / >
160+ < div style= {{ marginBottom: 24 , marginTop: 40 }}> 用级联组件展示地址< / div>
161+ {! loading && (
162+ < CCascader
163+ options= {data}
164+ onChange= {onChange}
165+ fieldNames= {{ label: " name" , value: " id" , children: " children" }}
166+ placeholder= " Please select"
163167 style= {{ width: 328 }}
164168 changeOnSelect
165169 / >
0 commit comments