FilterCascader 级联筛选

列表筛选栏级联选择：双栏浏览 + 搜索；可嵌入 RdInputGroup。

基础用法

分类

全部

<script setup lang="ts">
import { ref } from 'vue'
import {
  RdFilterCascader,
  RdInputGroup,
  type CascaderOption,
} from '@rd-element/ui'

const path = ref<string[]>([])
const options: CascaderOption[] = [
  { label: '华东', value: 'east', children: [{ label: '上海', value: 'sh' }] },
]
</script>

<template>
  <RdInputGroup>
    <template #left>分类</template>
    <RdFilterCascader
      v-model="path"
      :options="options"
      root-label="全部分类"
      placeholder="全部"
    />
  </RdInputGroup>
</template>

API

Attributes

属性名	说明	类型	默认值
v-model	选中路径 value 数组	string[]	[]
options	级联选项树	CascaderOption[]	—
placeholder	未选占位	string	'全部'
rootLabel	根节点标签	string	'全部'
searchPlaceholder	搜索框占位	string	'搜索'
checkStrictly	允许只选父级	boolean	true

Events

事件名	说明	类型
update:modelValue	路径变更	(value: string[]) => void
change	确认选择	(value: string[]) => void