SelectCascader

Brief Introduction

The SelectCascader component is used for users to select one or more options from a multi-level dropdown list.
You can use <MYSelect-cascader></MYSelect-cascader> or <MYSelect-cascader /> to implement a cascader selector.

Basic Usage

Use v-model to bind the selected value and pass cascading data via the options prop.

Code Demo

Please select

<template>
    <MYSelect-cascader v-model='selectedValue1' :options='options1' placeholder='Please select' />
</template>

展开代码

Disabled State

Disable Entire Selector

Use the disabled prop to disable the selector.

Code Demo

Disabled state

<template>
    <MYSelect-cascader v-model='selectedValue2' :options='options2' placeholder='Disabled state' disabled />
</template>

展开代码

Disable a Specific Option

Use the disabled prop to disable a single option.

Code Demo

Disable a specific option

<template>
    <MYSelect-cascader v-model='selectedValue3' :options='options3' placeholder='Disable a specific option' />
</template>

展开代码

Multi-level Menu

Multi-level menu, pass multi-level data via the options prop.

Code Demo

Multi-level menu

<template>
    <MYSelect-cascader v-model='selectedValue4' :options='options4' placeholder='Multi-level menu' />
</template>

展开代码

Custom Size

Use the width and height props to customize the selector's width and height.

Code Demo

Custom size

<template>
    <MYSelect-cascader v-model='selectedValue5' :options='options4' placeholder='Custom size' height='50px' width='500px' />
</template>

展开代码

Combined Usage

Finally, here is a combination of multiple APIs to create a cascader selector:

Code Demo

Combined usage example

<template>
    <MYSelect-cascader 
        v-model='selectedValue6' 
        :options='options4' 
        placeholder='Combined usage example'
        height='45px'
        width='400px'
    />
</template>

展开代码

API Reference

Props

Prop	Description	Type	Options	Default
modelValue	Bound value	string | array	—	—
options	Cascading data	Array	—	[]
placeholder	Placeholder text	string	—	'Please select'
disabled	Whether to disable	boolean	—	false
width	Width	string | number	—	'260px'
height	Height	string | number	—	'40px'

Type Definitions

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