---
title: Cascader 级联
description: 级联选择器适用于有清晰层级结构的数据集合，用户可以通过逐级查看并选择。一般而言，级联选择器包括：选择器和级联。
isComponent: true
usage: { title: "", description: "" }
spline: data，
author: 刘勇
---

## 基本用法

级联通过`options`来设置备选数据源，通过`v-model`，`value`，`defaultValue`可设置当前选中的值，可通
过[`inputProps`](/web/components/input)来定义输入框的样式等等。

{{ base }}

## 自定义字段名

默认情况下 options 为一个数组对象`{label:string;value:string;children:any[]}`，但实际中并非所有地方提供的都是一样结构的
数据，这时候就可以通过`keys`属性来设置对应关系。

{{ keys }}

## 多选模式

通过`multiple`可设置级联的选择模式为多选，此时输入框选中的值通过`l-tag`渲染，此时可通
过[`tagProps`](/web/components/tag)来定义标签的属性，也可通过[`tagInputProps`](/web/components/tag-input)来设置标签输入
框的样式。

> 注意：当为多选的时候，选中的值为数组。

{{ multiple }}

## 选中值类型

通过`valueType`可定义选中值的类型，可选：`single`，`full`，默认为`single`。

{{ valueType }}

## 选中值模式

通过`valueMode`可定义选中值的模式，`all` 表示父节点和子节点全部会出现在选中值里面；`parentFirst` 表示当子节点全部选中时
，仅父节点在选中值里面；`onlyLeaf` 表示无论什么情况，选中值仅呈现叶子节点

> 注意：仅在多选模式下生效。

{{ valueMode }}

## 触发方式

通过`trigger`可设置触发级联菜单的方式，可选：`hover`，`click`，这里的触发方式并非输入框的触发方式，而是多层级的时候，触
发下一级的方式。

{{ trigger }}

## 不同状态

该功能类似 input ，可通过`status`来设置级联输入框的不同状态，可选：`default`，`success`，`warning`，`error`。

{{ status }}

## 提示信息

通过`tips`可设置级联输入框的提示信息，有点类似 input 的校验提示信息，当状态发生改变的时候，提示信息也会相应的变化。

{{ tips }}

## 不同尺寸

通过`size`可设置级联输入框的尺寸大小，可选：`small`，`medium`，`large`，默认为：`medium`。

{{ size }}

## 取消父子节点关联

设置`checkStrictly`属性后，可取消父子节点的关联关系，可单独选取。

{{ checkStrictly }}

## 可清空

通过`clearable`可让级联输入框可清空，当鼠标移动到输入框上时右侧会出现清空图标。

{{ clearable }}

## 折叠已选项

适用多选情况，通过`minCollapsedNum`设置最小折叠数量，超出该数值的选中项折叠。值为 `0` 则表示不折叠，默认情况超出部分
为`+N`，也可通过`collapsedItems`来定义节点。

{{ collapse }}

## 最大可选个数

通过`max`可设置最大可选择的个数，适用于多选情况。

{{ max }}

## 动态加载

当请求数据量较大的时候，每次往往智慧加载一层，这时候就可以使用`lazy`来定义是否开启延迟加载，这时候需要设置`children`的值
为 true，然后通过`load`回调来处理加载操作。

{{ lazy }}

## 禁用

通过`disabled`属性可定义级联菜单的禁用样式。

{{ disabled }}
