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;
}