tmagic-editor/docs/assets/form-config_fields_cascader.md.DhJC40cS.lean.js

import{At as e,E as t,Mt as n,Ot as r,Tt as i,Xt as a,dn as o,en as s,jt as c}from"./chunks/framework.ECw2lWOt.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(t,l,u,d,f,p){let m=s(`demo-block`);return a(),r(`div`,null,[l[7]||=i(`h1`,{id:`cascader-级联选择器`,tabindex:`-1`},[c(`Cascader 级联选择器 `),i(`a`,{class:`header-anchor`,href:`#cascader-级联选择器`,"aria-label":`Permalink to “Cascader 级联选择器”`},`​`)],-1),l[8]||=i(`p`,null,`当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。`,-1),l[9]||=i(`h2`,{id:`基础用法`,tabindex:`-1`},[c(`基础用法 `),i(`a`,{class:`header-anchor`,href:`#基础用法`,"aria-label":`Permalink to “基础用法”`},`​`)],-1),l[10]||=i(`p`,null,`有两种触发子菜单的方式`,-1),n(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:o(()=>[...l[0]||=[i(`p`,null,`type为'cascader'`,-1)]]),_:1}),l[11]||=i(`h2`,{id:`禁用选项`,tabindex:`-1`},[c(`禁用选项 `),i(`a`,{class:`header-anchor`,href:`#禁用选项`,"aria-label":`Permalink to “禁用选项”`},`​`)],-1),l[12]||=i(`p`,null,`通过在数据源中设置 disabled 字段来声明该选项是禁用的`,-1),n(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:o(()=>[...l[1]||=[i(`p`,null,` 本例中，options 指定的数组中的第一个元素含有 disabled: true 键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的 disabled 字段是否为 true ，如果你的数据中表示禁用含义的字段名不为 disabled ，可以通过 disabled 属性来指定（详见下方 API 表格）。当然， value 、 label 和 children 这三个字段名也可以通过同样的方式指定。 `,-1)]]),_:1}),l[13]||=i(`h2`,{id:`多选`,tabindex:`-1`},[c(`多选 `),i(`a`,{class:`header-anchor`,href:`#多选`,"aria-label":`Permalink to “多选”`},`​`)],-1),l[14]||=i(`p`,null,[c(`可通过 `),i(`code`,null,`multiple = true`),c(` 来开启多选模式`)],-1),n(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:o(()=>[...l[2]||=[i(`p`,null,` 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag `,-1)]]),_:1}),l[15]||=i(`h2`,{id:`任意一级可选`,tabindex:`-1`},[c(`任意一级可选 `),i(`a`,{class:`header-anchor`,href:`#任意一级可选`,"aria-label":`Permalink to “任意一级可选”`},`​`)],-1),l[16]||=i(`p`,null,`在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。`,-1),l[17]||=i(`p`,null,[c(`可通过 `),i(`code`,null,`checkStrictly = true`),c(` 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。`)],-1),n(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:o(()=>[...l[3]||=[i(`p`,null,` 配置 checkStrictly 为 true，可选择任意一级选项 `,-1)]]),_:1}),l[18]||=i(`h2`,{id:`仅返回选中节点的值`,tabindex:`-1`},[c(`仅返回选中节点的值 `),i(`a`,{class:`header-anchor`,href:`#仅返回选中节点的值`,"aria-label":`Permalink to “仅返回选中节点的值”`},`​`)],-1),l[19]||=i(`p`,null,[c(`在选中节点改变时，默认返回由该节点所在的各级菜单的值所组成的数组。可通过 `),i(`code`,null,`emitPath = false`),c(` 设置仅返回该节点的值。`)],-1),n(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:o(()=>[...l[4]||=[i(`p`,null,` 配置 emitPath 为 false，仅返回选中节点的值，而非完整路径数组 `,-1)]]),_:1}),l[20]||=i(`h2`,{id:`值分隔符`,tabindex:`-1`},[c(`值分隔符 `),i(`a`,{class:`header-anchor`,href:`#值分隔符`,"aria-label":`Permalink to “值分隔符”`},`​`)],-1),l[21]||=i(`p`,null,[c(`当需要将选中值以字符串形式存储时，可通过 `),i(`code`,null,`valueSeparator`),c(` 指定分隔符，组件会自动将数组转换为字符串存储，读取时也会自动还原。`)],-1),n(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:o(()=>[...l[5]||=[i(`p`,null,` 配置 valueSeparator 为 '/'，选中值将以 'zhinan/shejiyuanze/yizhi' 的字符串形式存储 `,-1)]]),_:1}),l[22]||=i(`h2`,{id:`远程选项`,tabindex:`-1`},[c(`远程选项 `),i(`a`,{class:`header-anchor`,href:`#远程选项`,"aria-label":`Permalink to “远程选项”`},`​`)],-1),l[23]||=i(`p`,null,`通过接口请求获取选项列表`,-1),n(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:o(()=>[...l[6]||=[i(`p`,null,` 配置 remote 为 true，然后配置 option 对象，而不是 options 数组 `,-1)]]),_:1},8,[`config`]),l[24]||=e("",14)])}var f=t(u,[[`render`,d]]);export{l as __pageData,f as default};