Filter Shell 筛选外壳

列表筛选栏用 RdInputGroup：#left 标签 | 默认槽放 Element Plus 控件；级联用 RdFilterCascader。筛选栏控件请直接使用 Element Plus（el-input / el-select 等）；布局用 RdInputGroup 的 #left / 默认槽，库不提供 RdInput / RdSelect 封装。

筛选栅格

RdInputGroup：标签 | 竖线 | 控件；每个筛选项独占一行。

关键词

状态

全部

地区

全部

订单日期

至

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

const keyword = ref('')
const status = ref<string[]>([])
const region = ref<string[]>([])
const dateRange = ref<[Date, Date] | null>(null)

const regionOptions: CascaderOption[] = [
  { label: '亚太', value: 'apac', children: [{ label: 'Singapore', value: 'SG' }] },
]
</script>

<template>
  <div class="demo-stack" style="max-width:420px">
    <RdInputGroup>
      <template #left>关键词</template>
      <el-input v-model="keyword" placeholder="公司、联系人、邮箱" clearable>
        <template #prefix><Search :size="14" /></template>
      </el-input>
    </RdInputGroup>
    <RdInputGroup>
      <template #left>状态</template>
      <el-select
        v-model="status"
        placeholder="全部"
        multiple
        collapse-tags
        :max-collapse-tags="1"
        clearable
      >
        <el-option label="活跃" value="Active" />
        <el-option label="未活跃" value="Inactive" />
      </el-select>
    </RdInputGroup>
    <RdInputGroup>
      <template #left>地区</template>
      <RdFilterCascader
        v-model="region"
        :options="regionOptions"
        root-label="所有地区"
        placeholder="全部"
      />
    </RdInputGroup>
    <RdInputGroup>
      <template #left>订单日期</template>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        format="YYYY/MM/DD"
        range-separator="至"
        start-placeholder="开始"
        end-placeholder="结束"
        :shortcuts="orderDateRangeShortcuts"
        popper-class="filter-date-popper"
        clearable
      />
    </RdInputGroup>
  </div>
</template>

相关 API

本页为筛选外壳拼装示例，组件字段说明见：

• RdInputGroup — 标签 | 控件外壳与 slots
• RdFilterCascader — 级联筛选 Attributes / Events
• Element Plus：el-input / el-select / el-date-picker 等请查阅 Element Plus 文档