tmagic-editor/docs/assets/form-config_fields_cascader.md.DVdum0nR.lean.js
2025-03-31 12:39:00 +00:00

2 lines
4.4 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import{aw as i,ag as d,y as u,z as t,A as a,P as n,L as l,H as o}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Cascader 级联选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/cascader.md","filePath":"form-config/fields/cascader.md"}'),s={name:"form-config/fields/cascader.md"};function b(c,e,h,v,p,m){const r=d("demo-block");return t(),u("div",null,[e[3]||(e[3]=a("h1",{id:"cascader-级联选择器",tabindex:"-1"},[l("Cascader 级联选择器 "),a("a",{class:"header-anchor",href:"#cascader-级联选择器","aria-label":'Permalink to "Cascader 级联选择器"'},"")],-1)),e[4]||(e[4]=a("p",null,"当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。",-1)),e[5]||(e[5]=a("h2",{id:"基础用法",tabindex:"-1"},[l("基础用法 "),a("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),e[6]||(e[6]=a("p",null,"有两种触发子菜单的方式",-1)),n(r,{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(()=>e[0]||(e[0]=[a("p",null,"type为'cascader'",-1)])),_:1}),e[7]||(e[7]=a("h2",{id:"禁用选项",tabindex:"-1"},[l("禁用选项 "),a("a",{class:"header-anchor",href:"#禁用选项","aria-label":'Permalink to "禁用选项"'},"")],-1)),e[8]||(e[8]=a("p",null,"通过在数据源中设置 disabled 字段来声明该选项是禁用的",-1)),n(r,{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(()=>e[1]||(e[1]=[a("p",null," 本例中options 指定的数组中的第一个元素含有 disabled: true 键值对因此是禁用的。在默认情况下Cascader 会检查数据中每一项的 disabled 字段是否为 true ,如果你的数据中表示禁用含义的字段名不为 disabled ,可以通过 disabled 属性来指定(详见下方 API 表格)。当然, value 、 label 和 children 这三个字段名也可以通过同样的方式指定。 ",-1)])),_:1}),e[9]||(e[9]=a("h2",{id:"多选",tabindex:"-1"},[l("多选 "),a("a",{class:"header-anchor",href:"#多选","aria-label":'Permalink to "多选"'},"")],-1)),e[10]||(e[10]=a("p",null,[l("可通过 "),a("code",null,"multiple = true"),l(" 来开启多选模式")],-1)),n(r,{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(()=>e[2]||(e[2]=[a("p",null," 在开启多选模式后默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1})])}const x=i(s,[["render",b]]);export{g as __pageData,x as default};