级联选择

示例

请选择
You selected:
基本用法

通过data给组件传入数据,v-model进行数据双向绑定,绑定的结果是选中的每一项组成的数组。其中data的数据格式如示例所示:

  1. value选中后的值
  2. label展示的文案
  3. children如果存在子选项,需要递归地指定该属性
  4. disabled禁用该项
index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
请选择
禁用状态

给组件添加disabled属性,可以禁用整个组件;给data数据项添加disabled属性可以单独禁用该项

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
请选择
触发方式

子菜单的触发的方式默认是click点击展开,通过设置trigger属性为hover,可以指定为移入展开

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
You selected:
选择即改变

添加changeOnSelect属性,即可使组件选择即改变value,这样可以只选中父级

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
请选择
请选择
请选择
尺寸

组件提供4中尺寸:large default small mini

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
请选择
自定义结果显示

给组件指定format扩展点,可以自定义选择结果显示,组件会将当前选择的数据项以数组的格式作为参数传入

Vue下通过slot="format" slot-scope="values"指定

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
可搜索

添加filterable属性,即可实现搜索。默认会根据label进行搜索,你也可以通过filter属性,传入自定义的搜索逻辑,组件会将当前的搜索关键词和每一项数据作为参数传入

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
请选择
动态加载数据

如果数据项中的children属性为空数组[],则代表该项子数据为动态加载的,此时可以指定loadData属性来定义动态加载的逻辑,组件会将当前展开项的数据当做参数item传入,你只需要更新itemchildren属性即可,该函数的返回值为Promise对象

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

属性

属性 说明 类型 默认值
data 组件要展示的数据 Array undefined
value 组件当前的值,可使用v-model双向绑定 * ""
changeOnSelect 是否选中父级即改变value Boolean false
trigger 子菜单触发方式,默认点击触发 "click" | "hover" "click"
format 自定义结果显示,组件会将当前选择的所有数据项以数组的格式作为参数传入 Function (values) => values.map(value => value.label).join(' / ')
keywords 如果支持筛选,当前关键词 String undefined
filterable 是否可搜索,默认根据label进行搜索 Boolean false
filter 如果可搜索,你可以传入filter改变搜索逻辑,组件会将搜索关键词和数据项作为参数传入 Function (keywords, props) => props.label.indexOf(keywords) > -1
loadData 如果data中的children属性值为空数组[],则可以使用该属性定义动态加载逻辑,组件会将当前选中的数据项作为参数传入 Function (item) => {}
disabled 是否禁用 Boolean false
clearable 是否可清空 Boolean false
size 尺寸 "large" | "default" | "small" | "mini" "default"
fluid 是否宽度100% Boolean false
width 指定宽度 Number undefined
placeholder 占位文案 String "请选择"

扩展点

名称 说明 参数
format 扩展选择后展示的内容,等同于format属性,优先级比format属性高 values: Array 当前所有已选值