Cascader 级联选择器

级联选择器组件，用于选择级联数据。

基础用法

<div id="demo-cascader"></div>

<script>
  const cascader = new SaCascader('#demo-cascader', {
    options: [
      {
        value: '1',
        label: '选项1',
        children: [
          { value: '1-1', label: '选项1-1' },
          { value: '1-2', label: '选项1-2' }
        ]
      },
      {
        value: '2',
        label: '选项2',
        children: [
          { value: '2-1', label: '选项2-1' },
          { value: '2-2', label: '选项2-2' }
        ]
      }
    ],
    placeholder: '请选择',
    onChange: (value) => {
      console.log('选择的值:', value);
    }
  });
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaCascaderOptions	{}

配置选项

参数	说明	类型	可选值	默认值
options	级联数据	Array<CascaderOption>	-	[]
value	当前值	Array<string>	-	[]
placeholder	占位符	string	-	'请选择'
disabled	是否禁用	boolean	-	false
clearable	是否可清除	boolean	-	true
onChange	值变化回调	function(value: Array<string>)	-	-

CascaderOption 配置

参数	说明	类型	默认值
value	选项值	string	-
label	选项文本	string	-
children	子选项数组	Array<CascaderOption>	-
disabled	是否禁用	boolean	false

方法

方法名	说明	参数	返回值
getValue	获取当前值	-	Array<string>
setValue	设置值	value: Array<string>	void
clear	清除值	-	void
destroy	销毁实例	-	void

示例代码

手动创建实例

const cascader = new SaCascader('#my-cascader', {
  options: [
    {
      value: '1',
      label: '省份',
      children: [
        {
          value: '1-1',
          label: '城市',
          children: [
            { value: '1-1-1', label: '区县1' },
            { value: '1-1-2', label: '区县2' }
          ]
        }
      ]
    }
  ],
  placeholder: '请选择省市区',
  clearable: true,
  onChange: (value) => {
    console.log('选择的值:', value);
  }
});

// 设置值
cascader.setValue(['1', '1-1', '1-1-1']);

// 获取值
const value = cascader.getValue();

// 清除值
cascader.clear();

实际使用场景

场景 1：省市区选择

使用级联选择器选择省市区。

<div id="region-cascader" style="width: 300px;"></div>

<script>
  const cascader = new SaCascader('#region-cascader', {
    options: [
      {
        value: 'beijing',
        label: '北京市',
        children: [
          {
            value: 'dongcheng',
            label: '东城区',
            children: [
              { value: 'dongcheng-1', label: '街道1' },
              { value: 'dongcheng-2', label: '街道2' }
            ]
          },
          {
            value: 'xicheng',
            label: '西城区',
            children: [
              { value: 'xicheng-1', label: '街道1' },
              { value: 'xicheng-2', label: '街道2' }
            ]
          }
        ]
      },
      {
        value: 'shanghai',
        label: '上海市',
        children: [
          {
            value: 'huangpu',
            label: '黄浦区',
            children: [
              { value: 'huangpu-1', label: '街道1' },
              { value: 'huangpu-2', label: '街道2' }
            ]
          }
        ]
      }
    ],
    placeholder: '请选择省市区',
    onChange: (value) => {
      console.log('选择的地区:', value);
    }
  });
</script>

加载 SanoUI 组件中...

场景 2：分类选择

使用级联选择器选择商品分类。

<div id="category-cascader" style="width: 300px;"></div>

<script>
  const cascader = new SaCascader('#category-cascader', {
    options: [
      {
        value: 'electronics',
        label: '电子产品',
        children: [
          {
            value: 'phone',
            label: '手机',
            children: [
              { value: 'iphone', label: 'iPhone' },
              { value: 'android', label: 'Android' }
            ]
          },
          {
            value: 'computer',
            label: '电脑',
            children: [
              { value: 'laptop', label: '笔记本' },
              { value: 'desktop', label: '台式机' }
            ]
          }
        ]
      },
      {
        value: 'clothing',
        label: '服装',
        children: [
          {
            value: 'men',
            label: '男装',
            children: [
              { value: 'shirt', label: '衬衫' },
              { value: 'pants', label: '裤子' }
            ]
          }
        ]
      }
    ],
    placeholder: '请选择分类',
    onChange: (value) => {
      console.log('选择的分类:', value);
    }
  });
</script>

加载 SanoUI 组件中...