级联选择框。
何时使用
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
API
<oio-cascader :options="options" v-model:value="value" />| 参数 | 说明 | 类型 | 默认值 | Version | |
|---|---|---|---|---|---|
| allowClear | 是否支持清除 | boolean | true | ||
| autofocus | 自动获取焦点 | boolean | false | ||
| changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | ||
| disabled | 禁用 | boolean | false | ||
| displayRender | 选择后展示的渲染函数,可使用 #displayRender="{labels, selectedOptions}" | ({labels, selectedOptions}) => VNode |
labels => labels.join(' / ') |
||
| dropdownClassName | 自定义浮层类名 | string | – | ||
| getTriggerContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body | ||
| loadData | 用于动态加载选项，无法与 showSearch 一起使用 |
(selectedOptions) => void |
– | ||
| maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number | responsive |
– | ||
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | v-slot | function(omittedValues) | – | ||
| multiple | 支持多选节点 | boolean | – | ||
| options | 可选项数据源 | – | |||
| placeholder | 输入框占位文本 | string | ‘请选择’ | ||
| searchValue | 设置搜索的值，需要与 showSearch 配合使用 |
string | – | ||
| showSearch | 在选择框中显示搜索框 | boolean | false | ||
| tagRender | 自定义 tag 内容，多选时生效 | slot | – | ||
| value(v-model:value) | 指定选中项 | string[] | number[] | – |
showSearch
showSearch 为对象时，其中的字段：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| filterOption | 接收 inputValue path 两个参数，当 path 符合筛选条件时，应返回 true，反之则返回 false。 |
function(inputValue, path): boolean |
事件
| 事件名称 | 说明 | 回调参数 | 版本 | |
|---|---|---|---|---|
| change | 选择完成后的回调 | (value, selectedOptions) => void |
– | |
| search | 监听搜索，返回输入的值 | (value) => void |
– |
Option
interface Option {
value: string | number;
label?: any;
disabled?: boolean;
children?: Option[];
// 标记是否为叶子节点，设置了 `loadData` 时有效
// 设为 `false` 时会强制标记为父节点，即使当前节点没有 children，也会显示展开图标
isLeaf?: boolean;
}Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/components/4948.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
