Skip to content

Cascade 级联选择器

级联选择器,用于多级数据的选择。

基础用法

级联选择器大部分情况都用作单选,其中单选时数据结构始终是一个以分隔符连接的字符串,例如a/b/c

级联时,可以指定严格模式,这样只有当选择到最后一级时,才会触发值更新事件。

属性

ts
/** 级联选择器组件属性 */
export interface CascadeProps extends FormComponentProps {
  /**
   * 分隔符
   * @default '/'
   */
  separator?: string
  /** 数据值 */
  modelValue?: string[] | string
  /** 级联数据项的标签字段 */
  labelKey?: string
  /** 级联数据项的值字段 */
  valueKey?: string
  /** 占位符 */
  placeholder?: string
  /** 是否可清除 */
  clearable?: boolean
  /** 子级字段 */
  childrenKey?: string
  /** 严格模式 */
  strict?: boolean
  /**
   * 数据项
   */
  data?: Record<string, any>[]

  /**
   * 禁用项
   */
  disabledNode?: (item: Record<string, any>) => boolean
  /**
   * 多选
   */
  multiple?: boolean
  /**
   * 搜索
   */
  filterable?: boolean
  visibilityLimit?: number
}

事件

ts
/** 级联选择器组件定义的事件 */
export interface CascadeEmits {
  (e: 'update:modelValue', value?: string | string[]): void
  (
    e: 'change',
    value: string[],
    label: string[],
    data: Record<string, any>[]
  ): void
  (
    e: 'change',
    value?: string,
    label?: string,
    item?: Record<string, any>
  ): void
  (e: 'clear'): void
}

基于 MIT 协议