{ "slug": "cascader", "mode": "scenarios", "curated": true, "examples": [ { "id": "cascader-ex-1", "title": "单选 + 搜索", "titleSrc": "demo", "desc": "", "html": "
\n
\n
", "preview": { "show": [ [ 0, 2 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 3 ], [ 0, 2, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
", "jsx": "import { useState } from 'react';\nimport { KoleCascader } from 'kole-ui/react';\n\nconst options = [\n { value: 'zj', label: '浙江', children: [\n { value: 'hz', label: '杭州', children: [{ value: 'xh', label: '西湖区' }, { value: 'bj', label: '滨江区' }] },\n { value: 'wz', label: '温州', children: [{ value: 'lc', label: '鹿城区' }] }\n ] },\n { value: 'js', label: '江苏', children: [\n { value: 'nj', label: '南京', children: [{ value: 'xk', label: '玄武区' }] }\n ] }\n];\n\nexport default function Demo() {\n // 单选:值为路径数组,未选择为 null\n const [value, setValue] = useState(null);\n return ;\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleCascader } from 'kole-ui/react';\n\nconst options = [\n { value: 'zj', label: '浙江', children: [\n { value: 'hz', label: '杭州', children: [{ value: 'xh', label: '西湖区' }, { value: 'bj', label: '滨江区' }] },\n { value: 'wz', label: '温州', children: [{ value: 'lc', label: '鹿城区' }] }\n ] },\n { value: 'js', label: '江苏', children: [\n { value: 'nj', label: '南京', children: [{ value: 'xk', label: '玄武区' }] }\n ] }\n];\n\nexport default function Demo(): JSX.Element {\n // 单选:值为路径数组,未选择为 null\n const [value, setValue] = useState(null);\n return ;\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Cascader.html:34-42 的 OPTIONS 三级树与 :24 data-multiple=\"false\"(单选块,含搜索);prop 名取自 frameworks/Cascader.jsx:16-24(options/value/filterable/placeholder)" ] }, { "id": "cascader-ex-2", "title": "多选", "titleSrc": "demo", "desc": "", "html": "
\n
\n
", "preview": { "show": [ [ 0, 3 ] ], "hide": [ [ 1 ], [ 0, 0 ], [ 0, 1 ], [ 0, 2 ], [ 0, 3, 0 ] ], "mode": "scenarios" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
", "jsx": "import { useState } from 'react';\nimport { KoleCascader } from 'kole-ui/react';\n\nconst options = [\n { value: 'zj', label: '浙江', children: [\n { value: 'hz', label: '杭州', children: [{ value: 'xh', label: '西湖区' }, { value: 'bj', label: '滨江区' }] },\n { value: 'wz', label: '温州', children: [{ value: 'lc', label: '鹿城区' }] }\n ] },\n { value: 'js', label: '江苏', children: [\n { value: 'nj', label: '南京', children: [{ value: 'xk', label: '玄武区' }] }\n ] }\n];\n\nexport default function Demo() {\n // 多选:值为路径数组的数组\n const [value, setValue] = useState([]);\n return ;\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleCascader } from 'kole-ui/react';\n\nconst options = [\n { value: 'zj', label: '浙江', children: [\n { value: 'hz', label: '杭州', children: [{ value: 'xh', label: '西湖区' }, { value: 'bj', label: '滨江区' }] },\n { value: 'wz', label: '温州', children: [{ value: 'lc', label: '鹿城区' }] }\n ] },\n { value: 'js', label: '江苏', children: [\n { value: 'nj', label: '南京', children: [{ value: 'xk', label: '玄武区' }] }\n ] }\n];\n\nexport default function Demo(): JSX.Element {\n // 多选:值为路径数组的数组\n const [value, setValue] = useState([]);\n return ;\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": [ "依据 frameworks/Cascader.html:29 data-multiple=\"true\" 多选块(options 同 :34-42);多选态下 trigger 渲染 kole-cascader-tags/kole-cascader-tag(Cascader.html:89-91)" ] } ] }