Cascader 级联选择器

介绍

用于多层级数据的选择，典型场景为省市区选择。

基础用法

通过 v-model 绑定选中的值。

<vd-cascader v-model="cascader.value" :options="cascader.options" />

const cascader = reactive({
  value: '',
  options: [
    {
      label: '测试1',
      value: '1',
      children: [
        { label: '测试1-1', value: '1-1' },
        { label: '测试1-2', value: '1-2' },
        { label: '测试1-3', value: '1-3' },
      ],
    },
    {
      label: '测试2',
      value: '2',
      children: [
        { label: '测试2-1', value: '2-1' },
        { label: '测试2-2', value: '2-2' },
        { label: '测试2-3', value: '2-3' },
      ],
    },
  ],
});

多选模式

通过 multiple 属性开启/关闭多选模式。

<vd-cascader
  v-model="cascader.value"
  :options="cascader.options"
  :multiple="true"
/>

const cascader = reactive({
  value: [],
  options: [...],
});

自定义选项字段

通过 fields 属性配置选项字段，支持 label、value、children 字段。

<vd-cascader
  v-model="picker.value"
  :options="picker.options"
  :fields="fields"
/>

import { CascaderFields } from 'vital-design';

const fields: CascaderFields = {
  label: 'text',
  value: 'name',
  children: 'child',
};

const cascader = reactive({
  value: '',
  options: [
    {
      text: '测试1',
      name: '1',
      child: [
        { text: '测试1-1', name: '1-1' },
        { text: '测试1-2', name: '1-2' },
        { text: '测试1-3', name: '1-3' },
      ],
    },
    {
      text: '测试2',
      name: '2',
      child: [
        { text: '测试2-1', name: '2-1' },
        { text: '测试2-2', name: '2-2' },
        { text: '测试2-3', name: '2-3' },
      ],
    },
  ],
});

异步加载

通过 before-change 属性配置异步加载函数，支持 Promise。

<vd-cascader
  v-model="cascader.value"
  :options="cascader.options"
  :before-change="beforeChange"
/>

import { CascaderBeforeChange } from 'vital-design';
import { timeout } from '@vital-design/shared';

const cascader = reactive({
  value: '',
  options: [],
});

const beforeChange: CascaderBeforeChange = (option) => {
  // 模拟异步请求
  await timeout(300);

  // 请求异常时，返回 false 阻止切换
  if (...) {
    return false;
  }

  // 有下级数据时，返回下级数据
  if (...) {
    return [...];
  }

  // 没有下级数据时，返回空数组
  return [];
}

搭配弹出层使用

可搭配 Popover 组件使用，实现弹出层选择组。

<vd-cell title="级联选择器" is-link @click="cascader.show = true" />

<vd-popup v-model="cascader.show" position="bottom" round>
  <vd-cascader v-model="cascader.value" :options="cascader.options" />
</vd-popup>

const cascader = reactive({
  show: false,
  value: '',
  options: [...],
});

API

Props

参数	说明	类型	默认值
v-model	选中值	string | number | (string | number)[]	-
options	列数据	CascaderOption[]	-
fields	选项字段	CascaderFields	-
multiple	是否多选	boolean	false
swipeable	是否开启左右滑动手势切换	boolean	true
placeholder	占位符，多选未选择时展示的文案	string	-
before-change	改变前的回调函数，支持 Promise	CascaderBeforeChange	-
before-change-cache	是否缓存已获取的 before-change 函数结果，下次不再触发	boolean	true
auto-clear-cache	是否自动清除缓存，在更改 options 数据指向时触发	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	改变时触发	CascaderSelectedData
updated	更新时触发	CascaderSelectedData
finish	完成时触发	CascaderSelectedData

Slots

名称	说明
option	选择项
label	选择项下的标签