• cascade 级联
  • 属性说明
  • 示例
    • 代码示例

cascade 级联

解释：多级选择组件，为开发者提供级联选择功能，默认为三级。比如：省/市/区。该组件包括左侧标签栏，以及右侧多个 picker（从底部弹起的滚动选择器）。支持配置左侧标签宽度，并提供自定义样式，可供开发者进行定制。

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS
• CSS
• JSON

 
 
 

  
  
  
<!--四字标题-->
  
  
  
<smt-cascade
  
  
  
 range="{{multiArray1}}"
  
  
  
 label="四字标题"
  
  
  
 range-key="name"
  
  
  
 bind:change="change"
  
  
  
 placeholder="{{['请选择省', '请选择市', '请选择区']}}"
  
  
  
></smt-cascade>
  
  
  
<!--配置无下边框-->
  
  
  
<smt-cascade
  
  
  
 range="{{multiArray2}}"
  
  
  
 label="无下边框""
  
  
  
 range-key="name"
  
  
  
 noborder="true"
  
  
  
 bind:change="change"
  
  
  
></smt-cascade>
  
  
  
<!--配置label-width-->
  
  
  
<smt-cascade
  
  
  
 range="{{multiArray3}}"
  
  
  
 label="六字标题排版"
  
  
  
 range-key="name"
  
  
  
 label-width="6em"
  
  
  
 bind:change="change"
  
  
  
 placeholder="{{['请选择省', '请选择市', '请选择区']}}"
  
  
  
></smt-cascade>
  
  
  
<!--配置tips-->
  
  
  
<smt-cascade
  
  
  
 range="{{multiArray4}}"
  
  
  
 label="配置未点击时提示"
  
  
  
 range-key="name"
  
  
  
 bind:change="change"
  
  
  
 tips="{{['请选择省', '请选择市', '请选择区']}}"
  
  
  
></smt-cascade>
  
  
  
<!--配置回填数据-->
  
  
  
<smt-cascade
  
  
  
 range="{{multiArray5}}"
  
  
  
 label="回填"
  
  
  
 value="{{[1, 2, 1]}}"
  
  
  
 range-key="name"
  
  
  
 bind:change="change"
  
  
  
 placeholder="{{['请选择省', '请选择市', '请选择区']}}"
  
  
  
></smt-cascade>
  
  
  
<!--配置禁用-->
  
  
  
<smt-cascade
  
  
  
 range="{{multiArray6}}"
  
  
  
 label="禁用型"
  
  
  
 range-key="name"
  
  
  
 disabled
  
  
  
 bind:change="change"
  
  
  
 placeholder="{{['请选择省', '请选择市', '请选择区']}}"
  
  
  
></smt-cascade>
  
  
  
<!--外部样式类-->
  
  
  
<smt-cascade
  
  
  
 range="{{multiArray7}}"
  
  
  
 label="externalClasses"
  
  
  
 cascade-picker="cascade-picker"
  
  
  
 cascade-label="cascade-label"
  
  
  
 cascade-content="cascade-content"
  
  
  
 cascade-picker-content="cascade-picker-content"
  
  
  
 range-key="name"
  
  
  
 bind:change="change"
  
  
  
 placeholder="{{['请选择省', '请选择市', '请选择区']}}"
  
  
  
></smt-cascade>