Cascader 级联选择器

用于表单选取数据。

全局配置

在全局配置组件属性。

Cascader组件属性配置

app.provide(CASCADER_KEY, {
  clearable: true,
  showAllLevels: true,
  collapseTags: true,
  collapseTagsTooltip: true,
  separator: '/',
  // others props...
});

基础用法

传入data属性即可生成对应的数据，data属性可以是数组、Promise、Callback函数、Getter函数。

属性&事件&插槽透传

Cascader基于ElCascader封装，所以你可以传入ElCascader的所有属性、事件和插槽。

属性

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值，默认绑定value-key对应的值	T[keyof T] / T[keyof T][]
data	组件数据	LoadData<T> T[] | Promise<T[]> | ((resolve: (data: T[]) => void, reject: (reason: any) => void) => void) / () => LoadData<T>	[]
label-key	指定列表项文字为数据对象的某个属性值	string	label
value-key	指定列表项选中后绑定值为数据对象的某个属性值	string	value
lazy	是否懒加载数据 只有通过Callback函数、Getter函数的方式传入组件数据时懒加载才会生效。	boolean	false

类型声明

import { SelectProps as selectProps } from 'element-plus/es/components/select/src/select';
import type { ExtractPropTypes } from 'vue';
import type { ComponentExposed } from 'vue-component-type-helpers';
import { ElSelect } from 'element-plus';
import Select from './select.vue';
import type { LoadData } from '@liv-web/utils';

/**
 * 选择器属性
 * @template T 列表项的数据类型
 */
export interface SelectProps<T> {
  /**
   * 组件数据
   * @remarks 可以是数组、Promise、Callback函数、Getter函数
   * @defaultValue []
   */
  data?: LoadData<T> | (() => LoadData<T>);
  /**
   * 指定列表项文字为数据对象的某个属性值
   * @defaultValue 'label'
   */
  labelKey?: string;
  /**
   * 指定列表项选中后绑定值为数据对象的某个属性值
   * @defaultValue 'value'
   */
  valueKey?: string;
  /**
   * 是否懒加载数据
   * @remarks 只有通过Callback函数、Getter函数的方式传入组件数据时懒加载才会生效
   * @defaultValue false
   */
  lazy?: boolean;
}

/**
 * 选择器组件实例
 * @template T 列表项的数据类型
 */
export type SelectInstance<
  T extends Record<string | number | symbol, any> = Record<string | number | symbol, any>,
> = ComponentExposed<typeof Select<T>>;

/**
 * el-select原生属性
 */
export type ElSelectProps = ExtractPropTypes<typeof selectProps>;

/**
 * el-select原生实例
 */
export type ElSelectInstance = InstanceType<typeof ElSelect>;

/**
 * 选择器包含透传属性在内的全部属性
 * @template T 列表项的数据类型
 */
export type SelectFullProps<T> = Partial<
  Omit<Omit<ElSelectProps, 'modelValue'>, 'valueKey'> & SelectProps<T>
>;