这是 SelectCascader 组件使用文档的英文翻译。

---

SelectCascader

简要介绍

SelectCascader 组件用于用户从多级下拉列表中选择一个或多个选项。
您可以使用 <MYSelect-cascader></MYSelect-cascader> 或 <MYSelect-cascader /> 来实现级联选择器。

基础用法

使用 v-model 绑定选中值，并通过 options 属性传递级联数据。

代码演示

请选择

<template>
    <MYSelect-cascader v-model='selectedValue1' :options='options1' placeholder='请选择' />
</template>

展开代码

禁用状态

禁用整个选择器

使用 disabled 属性禁用选择器。

代码演示

禁用状态

<template>
    <MYSelect-cascader v-model='selectedValue2' :options='options2' placeholder='禁用状态' disabled />
</template>

展开代码

禁用特定选项

使用 disabled 属性禁用单个选项。

代码演示

禁用特定选项

<template>
    <MYSelect-cascader v-model='selectedValue3' :options='options3' placeholder='禁用特定选项' />
</template>

展开代码

多级菜单

通过 options 属性传递多级数据实现多级菜单。

代码演示

多级菜单

<template>
    <MYSelect-cascader v-model='selectedValue4' :options='options4' placeholder='多级菜单' />
</template>

展开代码

自定义尺寸

使用 width 和 height 属性自定义选择器的宽度和高度。

代码演示

自定义尺寸

<template>
    <MYSelect-cascader v-model='selectedValue5' :options='options4' placeholder='自定义尺寸' height='50px' width='500px' />
</template>

展开代码

组合使用

最后，这是一个组合了多个 API 的级联选择器使用示例：

代码演示

组合使用示例

<template>
    <MYSelect-cascader 
        v-model='selectedValue6' 
        :options='options4' 
        placeholder='组合使用示例'
        height='45px'
        width='400px'
    />
</template>

展开代码

API 参考

Props

属性	描述	类型	可选值	默认值
modelValue	绑定值	string | array	—	—
options	级联数据	Array	—	[]
placeholder	占位文本	string	—	'请选择'
disabled	是否禁用	boolean	—	false
width	宽度	string | number	—	'260px'
height	高度	string | number	—	'40px'

类型定义

interface OptionCascaderProps {
  label: string;
  value: string;
  disabled?: boolean;
  children?: OptionCascaderProps[];
}

interface SelectCascaderProps {
  modelValue?: string | string[];
  options?: OptionCascaderProps[];
  placeholder?: string;
  disabled?: boolean;
  width?: string | number;
  height?: string | number;
}