12 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 将数据按照指定的格式传入后分层分级，通过此组件逐级查看并选择。 :::
::: title 基础使用 :::
::: demo 使用 lay-cascader 标签创建级联选择器
:::
::: title 自定义分割符号
:::
::: demo 使用 decollator 属性 自定义分割符号
输出的值：{{value1}}
:::
::: title 控制回显层级
:::
::: demo 使用 onlyLastLevel 属性 可以仅在回显的displayValue显示选中项最后一级的标签，而不是完整路径, 注意绑定的v-model仍然是完整的。
输出的值：{{valueLv}}
:::
::: title 触发方式 ::: ::: demo 本组弹出效果依托于DropDown组件，触发方式与其保持一致 :::
::: title Cascader 插槽
:::
::: demo 使用 默认插槽 可以自定义回显区域的内容,并且你可以通过change回调轻松拿到回显的值，同时你也可以使用动态插槽名来自定义你想要展示的内容，只需要在传入的数据中加入 slot参数，然后愉快的使用插槽自定义内容
<lay-cascader :options="options" v-model="value2" @change="onChange">
Click me ❤️
{{displayValue}}
<template #Guide>🤨😐😑😶😏😒🙄😬🤥😌
<template #Components>👋🤚🖐️✋🖖👌🤌🤏🤞🤟
<template #Resource>📱📲📶📳📴☎📞📟📠🤳
:::
::: title Cascader 属性 :::
::: table
| 属性 | 描述 |
|---|---|
| placeholder | 提示信息 |
| v-model / modelValue | 值 |
| decollator | 分割符号，默认为 / |
| options | 选项参数 格式请见上面的demo |
| onlyLastLevel | 回显displayValue仅显示最后一级，默认为 false |
| ::: |
::: title Cascader 事件 :::
::: table
| 方法名 | 描述 |
|---|---|
| change | 选中后数据改变的回调 |
:::
::: contributor cascader :::
::: previousNext cascader :::