import{H as e,It as t,Mt as n,dt as r,ft as i,lt as a,ot as o,pt as s,qt as c}from"./chunks/framework.BTDV-FQ9.js";var l=JSON.parse(`{"title":"Cascader 级联选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/cascader.md","filePath":"form-config/fields/cascader.md"}`),u={name:`form-config/fields/cascader.md`};function d(e,l,u,d,f,p){let m=t(`demo-block`);return n(),a(`div`,null,[l[7]||=o(`h1`,{id:`cascader-级联选择器`,tabindex:`-1`},[i(`Cascader 级联选择器 `),o(`a`,{class:`header-anchor`,href:`#cascader-级联选择器`,"aria-label":`Permalink to “Cascader 级联选择器”`},`​`)],-1),l[8]||=o(`p`,null,`当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。`,-1),l[9]||=o(`h2`,{id:`基础用法`,tabindex:`-1`},[i(`基础用法 `),o(`a`,{class:`header-anchor`,href:`#基础用法`,"aria-label":`Permalink to “基础用法”`},`​`)],-1),l[10]||=o(`p`,null,`有两种触发子菜单的方式`,-1),s(m,{type:`form`,config:[{type:`cascader`,name:`cascader`,text:`选项`,placeholder:`请选择`,options:[{value:`zhinan`,label:`指南`,children:[{value:`shejiyuanze`,label:`设计原则`,children:[{value:`yizhi`,label:`一致`},{value:`fankui`,label:`反馈`}]},{value:`daohang`,label:`导航`,children:[{value:`cexiangdaohang`,label:`侧向导航`},{value:`dingbudaohang`,label:`顶部导航`}]}]},{value:`zujian`,label:`组件`,children:[{value:`basic`,label:`Basic`,children:[{value:`layout`,label:`Layout 布局`},{value:`color`,label:`Color 色彩`}]},{value:`form`,label:`Form`,children:[{value:`checkbox`,label:`Checkbox 多选框`},{value:`input`,label:`Input 输入框`}]}]}]}]},{source:c(()=>[...l[0]||=[o(`p`,null,`type为'cascader'`,-1)]]),_:1}),l[11]||=o(`h2`,{id:`禁用选项`,tabindex:`-1`},[i(`禁用选项 `),o(`a`,{class:`header-anchor`,href:`#禁用选项`,"aria-label":`Permalink to “禁用选项”`},`​`)],-1),l[12]||=o(`p`,null,`通过在数据源中设置 disabled 字段来声明该选项是禁用的`,-1),s(m,{type:`form`,config:[{type:`cascader`,name:`cascader`,text:`选项`,placeholder:`请选择`,disabled:!0,options:[]},{type:`cascader`,name:`cascader1`,text:`选项2`,placeholder:`请选择`,options:[{value:`zhinan`,label:`指南`,disabled:!0,children:[{value:`shejiyuanze`,label:`设计原则`,children:[{value:`yizhi`,label:`一致`},{value:`fankui`,label:`反馈`}]},{value:`daohang`,label:`导航`,children:[{value:`cexiangdaohang`,label:`侧向导航`},{value:`dingbudaohang`,label:`顶部导航`}]}]},{value:`zujian`,label:`组件`,children:[{value:`basic`,label:`Basic`,disabled:!0,children:[{value:`layout`,label:`Layout 布局`},{value:`color`,label:`Color 色彩`}]},{value:`form`,label:`Form`,children:[{value:`checkbox`,label:`Checkbox 多选框`},{value:`input`,disabled:!0,label:`Input 输入框`}]}]}]}]},{source:c(()=>[...l[1]||=[o(`p`,null,` 本例中，options 指定的数组中的第一个元素含有 disabled: true 键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的 disabled 字段是否为 true ，如果你的数据中表示禁用含义的字段名不为 disabled ，可以通过 disabled 属性来指定（详见下方 API 表格）。当然， value 、 label 和 children 这三个字段名也可以通过同样的方式指定。 `,-1)]]),_:1}),l[13]||=o(`h2`,{id:`多选`,tabindex:`-1`},[i(`多选 `),o(`a`,{class:`header-anchor`,href:`#多选`,"aria-label":`Permalink to “多选”`},`​`)],-1),l[14]||=o(`p`,null,[i(`可通过 `),o(`code`,null,`multiple = true`),i(` 来开启多选模式`)],-1),s(m,{type:`form`,config:[{type:`cascader`,name:`cascader`,text:`选项`,multiple:!0,placeholder:`请选择`,options:[{value:`zhinan`,label:`指南`,children:[{value:`shejiyuanze`,label:`设计原则`,children:[{value:`yizhi`,label:`一致`},{value:`fankui`,label:`反馈`}]},{value:`daohang`,label:`导航`,children:[{value:`cexiangdaohang`,label:`侧向导航`},{value:`dingbudaohang`,label:`顶部导航`}]}]},{value:`zujian`,label:`组件`,children:[{value:`basic`,label:`Basic`,children:[{value:`layout`,label:`Layout 布局`},{value:`color`,label:`Color 色彩`}]},{value:`form`,label:`Form`,children:[{value:`checkbox`,label:`Checkbox 多选框`},{value:`input`,label:`Input 输入框`}]}]}]}]},{source:c(()=>[...l[2]||=[o(`p`,null,` 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag `,-1)]]),_:1}),l[15]||=o(`h2`,{id:`任意一级可选`,tabindex:`-1`},[i(`任意一级可选 `),o(`a`,{class:`header-anchor`,href:`#任意一级可选`,"aria-label":`Permalink to “任意一级可选”`},`​`)],-1),l[16]||=o(`p`,null,`在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。`,-1),l[17]||=o(`p`,null,[i(`可通过 `),o(`code`,null,`checkStrictly = true`),i(` 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。`)],-1),s(m,{type:`form`,config:[{type:`cascader`,name:`cascader`,text:`选项`,placeholder:`请选择`,checkStrictly:!0,options:[{value:`zhinan`,label:`指南`,children:[{value:`shejiyuanze`,label:`设计原则`,children:[{value:`yizhi`,label:`一致`},{value:`fankui`,label:`反馈`}]}]},{value:`zujian`,label:`组件`,children:[{value:`basic`,label:`Basic`,children:[{value:`layout`,label:`Layout 布局`},{value:`color`,label:`Color 色彩`}]}]}]}]},{source:c(()=>[...l[3]||=[o(`p`,null,` 配置 checkStrictly 为 true，可选择任意一级选项 `,-1)]]),_:1}),l[18]||=o(`h2`,{id:`仅返回选中节点的值`,tabindex:`-1`},[i(`仅返回选中节点的值 `),o(`a`,{class:`header-anchor`,href:`#仅返回选中节点的值`,"aria-label":`Permalink to “仅返回选中节点的值”`},`​`)],-1),l[19]||=o(`p`,null,[i(`在选中节点改变时，默认返回由该节点所在的各级菜单的值所组成的数组。可通过 `),o(`code`,null,`emitPath = false`),i(` 设置仅返回该节点的值。`)],-1),s(m,{type:`form`,config:[{type:`cascader`,name:`cascader`,text:`选项`,placeholder:`请选择`,emitPath:!1,checkStrictly:!0,options:[{value:`zhinan`,label:`指南`,children:[{value:`shejiyuanze`,label:`设计原则`,children:[{value:`yizhi`,label:`一致`},{value:`fankui`,label:`反馈`}]}]},{value:`zujian`,label:`组件`,children:[{value:`basic`,label:`Basic`,children:[{value:`layout`,label:`Layout 布局`},{value:`color`,label:`Color 色彩`}]}]}]}]},{source:c(()=>[...l[4]||=[o(`p`,null,` 配置 emitPath 为 false，仅返回选中节点的值，而非完整路径数组 `,-1)]]),_:1}),l[20]||=o(`h2`,{id:`值分隔符`,tabindex:`-1`},[i(`值分隔符 `),o(`a`,{class:`header-anchor`,href:`#值分隔符`,"aria-label":`Permalink to “值分隔符”`},`​`)],-1),l[21]||=o(`p`,null,[i(`当需要将选中值以字符串形式存储时，可通过 `),o(`code`,null,`valueSeparator`),i(` 指定分隔符，组件会自动将数组转换为字符串存储，读取时也会自动还原。`)],-1),s(m,{type:`form`,config:[{type:`cascader`,name:`cascader`,text:`选项`,placeholder:`请选择`,valueSeparator:`/`,options:[{value:`zhinan`,label:`指南`,children:[{value:`shejiyuanze`,label:`设计原则`,children:[{value:`yizhi`,label:`一致`}]}]},{value:`zujian`,label:`组件`,children:[{value:`basic`,label:`Basic`,children:[{value:`layout`,label:`Layout 布局`}]}]}]}]},{source:c(()=>[...l[5]||=[o(`p`,null,` 配置 valueSeparator 为 '/'，选中值将以 'zhinan/shejiyuanze/yizhi' 的字符串形式存储 `,-1)]]),_:1}),l[22]||=o(`h2`,{id:`远程选项`,tabindex:`-1`},[i(`远程选项 `),o(`a`,{class:`header-anchor`,href:`#远程选项`,"aria-label":`Permalink to “远程选项”`},`​`)],-1),l[23]||=o(`p`,null,`通过接口请求获取选项列表`,-1),s(m,{type:`form`,config:[{type:`cascader`,name:`cascader`,text:`选项`,placeholder:`请选择`,remote:!0,option:{url:`cascader/remote`,root:`data`,cache:!0,timeout:5e3,body:{query:``},item:e=>e}}]},{source:c(()=>[...l[6]||=[o(`p`,null,` 配置 remote 为 true，然后配置 option 对象，而不是 options 数组 `,-1)]]),_:1},8,[`config`]),l[24]||=r("",14)])}var f=e(u,[[`render`,d]]);export{l as __pageData,f as default};