Vue DevUI
主题

Cascader 级联菜单

下拉级联菜单。

何时使用

  1. 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
  2. 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。

基本用法

hover mode
click mode
data empty
disabled
<template>
  <div class="mb-0">hover mode</div>
  <d-cascader class="mb-2" :options="options" placeholder="请选择" style="width: 200px"></d-cascader>
  <div class="mb-0">click mode</div>
  <d-cascader class="mb-2" :options="options" v-model="value" showPath trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
  <div class="mb-0">data empty</div>
  <d-cascader class="mb-2" :options="[]" trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
  <div class="mb-0">disabled</div>
  <d-cascader class="mb-2" :options="[]" disabled trigger="click" placeholder="请选择" style="width: 200px"></d-cascader>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const options = reactive([
      {
        label: 'option1',
        value: 1,
        children: [
          {
            label: 'option1-1',
            value: 4,
            children: [
              {
                label: 'option1-1-1',
                value: 8,
                children: [],
              },
              {
                label: 'option1-1-2',
                value: 9,
                children: [
                  {
                    label: 'option1-1-2-1',
                    value: 81,
                  },
                ],
              },
            ],
          },
          {
            label: 'option1-2',
            value: 41,
          },
          {
            label: 'option1-3',
            value: 42,
          },
          {
            label: 'option1-4',
            value: 43,
          },
        ],
      },
      {
        label: 'option2',
        value: 2,
        children: [
          {
            label: 'option2-1',
            value: 5,
            children: [
              {
                label: 'option2-1-1',
                value: 51,
              },
              {
                label: 'option2-1-2',
                value: 61,
                disabled: true,
              },
            ],
          },
          {
            label: 'option2-2',
            value: 6,
            children: [
              {
                label: 'option2-2-1',
                value: 512,
              },
              {
                label: 'option2-2-2',
                value: 611,
              },
            ],
          },
          {
            label: 'option2-3',
            value: 712,
          },
        ],
      },
      {
        label: 'option3',
        value: 3,
        children: [],
        disabled: true,
      },
    ]);
    const value = ref([1, 4, 9, 81]);

    return { options, value };
  },
});
</script>

尺寸

Small

Middle

Large

支持sm、md、lg三种尺寸，默认为md。
<template>
  <h4>Small</h4>
  
  <d-cascader  :options="options" size="sm" placeholder="请选择" style="width: 200px"></d-cascader>

  <h4>Middle</h4>
  
  <d-cascader  :options="options" size="md" placeholder="请选择" style="width: 200px"></d-cascader>

  <h4>Large</h4>
  
  <d-cascader  :options="options" size="lg" placeholder="请选择" style="width: 200px"></d-cascader>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const options = reactive([
      {
        label: 'option1',
        value: 1,
        children: [
          {
            label: 'option1-1',
            value: 4,
            children: [
              {
                label: 'option1-1-1',
                value: 8,
                children: [],
              },
              {
                label: 'option1-1-2',
                value: 9,
                children: [
                  {
                    label: 'option1-1-2-1',
                    value: 81,
                  },
                ],
              },
            ],
          },
          {
            label: 'option1-2',
            value: 41,
          },
          {
            label: 'option1-3',
            value: 42,
          },
          {
            label: 'option1-4',
            value: 43,
          },
        ],
      },
      {
        label: 'option2',
        value: 2,
        children: [
          {
            label: 'option2-1',
            value: 5,
            children: [
              {
                label: 'option2-1-1',
                value: 51,
              },
              {
                label: 'option2-1-2',
                value: 61,
                disabled: true,
              },
            ],
          },
          {
            label: 'option2-2',
            value: 6,
            children: [
              {
                label: 'option2-2-1',
                value: 512,
              },
              {
                label: 'option2-2-2',
                value: 611,
              },
            ],
          },
          {
            label: 'option2-3',
            value: 712,
          },
        ],
      },
      {
        label: 'option3',
        value: 3,
        children: [],
        disabled: true,
      },
    ]);
    const value = ref([1, 4, 9, 81]);

    return { options, value };
  },
});
</script>

自定义宿主元素

选择的value值：
可通过host插槽自定义展开Cascader菜单的宿主元素。
<template>
  <d-cascader class="mb-2" v-model="value" :options="options" width="fit-content">
    <template #host>
      <d-button>请选择</d-button>
    </template>
  </d-cascader>
  <div>选择的value值：{{ value }}</div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const options = reactive([
      {
        label: 'option1',
        value: 1,
        children: [
          {
            label: 'option1-1',
            value: 4,
            children: [
              {
                label: 'option1-1-1',
                value: 8,
                children: [],
              },
              {
                label: 'option1-1-2',
                value: 9,
                children: [
                  {
                    label: 'option1-1-2-1',
                    value: 81,
                  },
                ],
              },
            ],
          },
          {
            label: 'option1-2',
            value: 41,
          },
          {
            label: 'option1-3',
            value: 42,
          },
          {
            label: 'option1-4',
            value: 43,
          },
        ],
      },
      {
        label: 'option2',
        value: 2,
        children: [
          {
            label: 'option2-1',
            value: 5,
            children: [
              {
                label: 'option2-1-1',
                value: 51,
              },
              {
                label: 'option2-1-2',
                value: 61,
                disabled: true,
              },
            ],
          },
          {
            label: 'option2-2',
            value: 6,
            children: [
              {
                label: 'option2-2-1',
                value: 512,
              },
              {
                label: 'option2-2-2',
                value: 611,
              },
            ],
          },
          {
            label: 'option2-3',
            value: 712,
          },
        ],
      },
      {
        label: 'option3',
        value: 3,
        children: [],
        disabled: true,
      },
    ]);
    const value = ref();

    return { value, options };
  },
});
</script>

可搜索

选择的value值：[ 1, 4, 8 ]
<template>
  <d-cascader
    :options="options"
    v-model="value1"
    placeholder="请选择"
    trigger="click"
    :width="300"
    filterable
    :debounce="500"
    :before-filter="beforeFilter"
    @change="changeFun"
    class="mb-2"
  ></d-cascader>
  <div>选择的value值：{{ value1 }}</div>
</template>
<script>
import { defineComponent, reactive, ref } from 'vue';
export default defineComponent({
  setup() {
    const options = reactive([
      {
        label: 'option1',
        value: 1,
        children: [
          {
            label: 'option1-1',
            value: 4,
            children: [
              {
                label: 'option1-1-1',
                value: 8,
                children: [],
              },
              {
                label: 'option1-1-2',
                value: 9,
                children: [
                  {
                    label: 'option1-1-2-1',
                    value: 81,
                  },
                ],
              },
            ],
          },
          {
            label: 'option1-2',
            value: 41,
          },
          {
            label: 'option1-3',
            value: 42,
          },
          {
            label: 'option1-4',
            value: 43,
          },
        ],
        icon: 'folder',
      },
      {
        label: 'option2',
        value: 2,
        children: [
          {
            label: 'option2-1',
            value: 5,
            children: [
              {
                label: 'option2-1-1',
                value: 51,
              },
              {
                label: 'option2-1-2',
                value: 61,
                disabled: true,
              },
            ],
          },
          {
            label: 'option2-2',
            value: 6,
            children: [
              {
                label: 'option2-2-1',
                value: 512,
              },
              {
                label: 'option2-2-2',
                value: 611,
              },
            ],
          },
          {
            label: 'option2-3',
            value: 712,
          },
        ],
        icon: 'folder',
      },
      {
        label: 'option3',
        value: 3,
        children: [],
        disabled: true,
        icon: 'folder',
      },
    ]);
    const value1 = ref([1, 4, 8]);
    const beforeFilter = (val) => {
      return new Promise((resolve, reject) => {
        resolve();
      });
    };
    const changeFun = (value) => {
      console.log(value);
    };
    return {
      options,
      value1,
      beforeFilter,
      changeFun,
    };
  },
});
</script>

API

参数类型默认说明跳转 Demo
v-model(number|string)[][]可选，单选时为`(number\sring)[]`
trigger'hover'|'click''hover'可选，指定展开次级菜单的方式基本用法
optionsCascaderItem[][]必选，级联器的菜单信息基本用法
placeholderstring''可选，没有选择时的输入框展示信息基本用法
disabledbooleanfalse可选，级联器是否禁用基本用法
widthnumber | string200可选，单位 px，用于控制组件输入框宽度和下拉的宽度基本用法
dropdownWidthnumber | string200可选，单位 px，控制下拉列表的宽度，默认和组件输入框 width 相等基本用法
clearablebooleantrue可选，是否支持清空选项基本用法
filterablebooleantrue可选，是否可搜索选项可搜索
debouncenumber300可选，搜索关键词输入去抖延迟可搜索
before-filterfunction(value)--可选,过滤函数调用前的钩子函数。该函数返回值时 false 或者被拒绝的 Promise，接下来的过滤逻辑将不会执行可搜索
sizeCascaderSize'md'文本框的尺寸尺寸

Cascader 事件

事件说明回调参数
change绑定值变化时触发的事件Function(value)
blur失去焦点时触发Function(e: FocusEvent)
focus获取焦点时触发Function(e: FocusEvent)

Cascader 插槽

插槽名说明
host自定义展开级联菜单的宿主元素

接口 & 类型定义

CascaderItem 

interface CascaderItem {
  label: string;
  value: number | string;
  children?: CascaderItem[];
  disabled?: boolean;
  icon?: string;
}

CascaderSize 

type CascaderSize = 'sm' | 'md' | 'lg';
Contributors
粤A2-20044005号