Filter Bar 并联筛选 2.14.1 ​

<template>
  <elp-filter-bar
    search-text="查询"
    reset-text="清空"
    show-reset
    :loading="loading"
    @search="handleSearch"
    @reset="handleReset"
  >
    <elp-filter-bar-item label="数据范围" width="220">
      <elp-select v-model="filters.scope" placeholder="全部">
        <elp-option label="全部" value="all" />
        <elp-option label="仅自己" value="mine" />
        <elp-option label="本部门" value="department" />
      </elp-select>
    </elp-filter-bar-item>

    <elp-filter-bar-item label="关键词" width="300">
      <elp-input
        v-model="filters.keyword"
        placeholder="昵称 / wxid / 机器人备注"
        clearable
      />
    </elp-filter-bar-item>

    <elp-filter-bar-item label="状态筛选" width="255">
      <elp-select v-model="filters.status" placeholder="全部" clearable>
        <elp-option label="全部" value="" />
        <elp-option label="在线" value="online" />
        <elp-option label="离线" value="offline" />
      </elp-select>
    </elp-filter-bar-item>

    <elp-filter-bar-item label="分组搜索" width="255">
      <elp-select v-model="filters.group" placeholder="选择分组" clearable>
        <elp-option label="默认分组" value="default" />
        <elp-option label="重点客户" value="important" />
      </elp-select>
    </elp-filter-bar-item>

    <elp-filter-bar-item label="到期筛选" width="255">
      <elp-select v-model="filters.expire" placeholder="全部" clearable>
        <elp-option label="7 天内" value="7" />
        <elp-option label="30 天内" value="30" />
        <elp-option label="已过期" value="expired" />
      </elp-select>
    </elp-filter-bar-item>
  </elp-filter-bar>

  <p class="filter-result">{{ result }}</p>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const createFilters = () => ({
  scope: 'all',
  keyword: '',
  status: '',
  group: '',
  expire: '',
})

const filters = reactive(createFilters())
const loading = ref(false)
const result = ref('修改条件后点击查询')

const handleSearch = () => {
  loading.value = true
  result.value = `查询参数：${JSON.stringify(filters)}`
  window.setTimeout(() => (loading.value = false), 400)
}

const handleReset = () => {
  Object.assign(filters, createFilters())
  result.value = '筛选条件已清空'
}
</script>

<style scoped>
.filter-result {
  margin: 12px 0 0;
  color: var(--elp-text-color-secondary);
  font-size: 12px;
}
</style>

<template>
  <elp-filter-bar
    :label-width="96"
    :item-width="280"
    search-text="应用筛选"
    reset-text="重置"
    show-reset
    @search="message = '筛选条件已应用'"
    @reset="reset"
  >
    <elp-filter-bar-item
      label="任务名称"
      min-width="280"
      aria-label="按任务名称筛选"
      grow
    >
      <elp-input v-model="form.name" placeholder="输入任务名称" clearable />
    </elp-filter-bar-item>

    <elp-filter-bar-item label="渠道" width="320">
      <elp-select
        v-model="form.channels"
        placeholder="选择渠道"
        multiple
        collapse-tags
        clearable
      >
        <elp-option label="企业微信" value="wechat" />
        <elp-option label="公众号" value="official" />
        <elp-option label="小程序" value="mini" />
      </elp-select>
    </elp-filter-bar-item>

    <elp-filter-bar-item label="创建时间" width="390">
      <elp-date-picker
        v-model="form.range"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </elp-filter-bar-item>

    <elp-filter-bar-item label="最低数量" width="230">
      <elp-input-number
        v-model="form.minimum"
        :min="0"
        controls-position="right"
      />
    </elp-filter-bar-item>
  </elp-filter-bar>

  <p class="filter-result">{{ message }}</p>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const initial = () => ({
  name: '',
  channels: [] as string[],
  range: [] as Date[],
  minimum: 0,
})

const form = reactive(initial())
const message = ref('支持 Input、Select、DatePicker、InputNumber 等任意控件')

const reset = () => {
  Object.assign(form, initial())
  message.value = '已恢复默认筛选条件'
}
</script>

<style scoped>
.filter-result {
  margin: 12px 0 0;
  color: var(--elp-text-color-secondary);
  font-size: 12px;
}
</style>

<template>
  <elp-filter-bar
    :label-width="96"
    search-text="筛选"
    reset-text="清空"
    show-reset
    @reset="reset"
  >
    <elp-filter-bar-item label="客户筛选" width="600" append-width="230">
      <elp-select v-model="customerType" placeholder="客户类型">
        <elp-option label="全部客户" value="all" />
        <elp-option label="企业客户" value="company" />
        <elp-option label="个人客户" value="personal" />
      </elp-select>

      <template #append>
        <elp-input v-model="keyword" placeholder="名称 / 手机号" clearable />
      </template>
    </elp-filter-bar-item>

    <elp-filter-bar-item width="560" append-width="200">
      <template #label>
        <span class="channel-label">渠道</span>
      </template>

      <elp-segmented
        v-model="channel"
        :options="['全部', '线上', '线下']"
        block
      />

      <template #append>
        <elp-select v-model="region" placeholder="所属区域" clearable>
          <elp-option label="华东" value="east" />
          <elp-option label="华南" value="south" />
          <elp-option label="华北" value="north" />
        </elp-select>
      </template>
    </elp-filter-bar-item>

    <elp-filter-bar-item
      label-mode="control"
      label-width="180"
      width="650"
      append-width="240"
      aria-label="自定义字段筛选"
    >
      <template #label>
        <elp-select v-model="customField" aria-label="筛选字段">
          <elp-option label="客户名称" value="name" />
          <elp-option label="客户编号" value="code" />
          <elp-option label="联系电话" value="phone" />
        </elp-select>
      </template>

      <elp-select v-model="operator" aria-label="筛选条件">
        <elp-option label="包含" value="contains" />
        <elp-option label="等于" value="equals" />
        <elp-option label="不等于" value="not-equal" />
      </elp-select>

      <template #append>
        <elp-input v-model="customValue" placeholder="输入筛选值" clearable />
      </template>
    </elp-filter-bar-item>
  </elp-filter-bar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const customerType = ref('all')
const keyword = ref('')
const channel = ref('全部')
const region = ref('')
const customField = ref('name')
const operator = ref('contains')
const customValue = ref('')

const reset = () => {
  customerType.value = 'all'
  keyword.value = ''
  channel.value = '全部'
  region.value = ''
  customField.value = 'name'
  operator.value = 'contains'
  customValue.value = ''
}
</script>

<style scoped>
.channel-label {
  color: var(--elp-color-primary);
  font-weight: 600;
}
</style>

<template>
  <div class="size-stack">
    <div>
      <p>Large</p>
      <elp-filter-bar size="large" :show-search="false" :show-reset="false">
        <elp-filter-bar-item label="客户" width="100%" append-width="45%">
          <elp-select v-model="large.type" placeholder="客户类型">
            <elp-option label="全部" value="all" />
            <elp-option label="企业" value="company" />
          </elp-select>
          <template #append>
            <elp-input v-model="large.keyword" placeholder="输入关键词" />
          </template>
        </elp-filter-bar-item>
      </elp-filter-bar>
    </div>

    <div>
      <p>Default</p>
      <elp-filter-bar size="default" :show-search="false" :show-reset="false">
        <elp-filter-bar-item label="客户" width="100%" append-width="45%">
          <elp-select v-model="normal.type" placeholder="客户类型">
            <elp-option label="全部" value="all" />
            <elp-option label="企业" value="company" />
          </elp-select>
          <template #append>
            <elp-input v-model="normal.keyword" placeholder="输入关键词" />
          </template>
        </elp-filter-bar-item>
      </elp-filter-bar>
    </div>

    <div>
      <p>Small</p>
      <elp-filter-bar size="small" :show-search="false" :show-reset="false">
        <elp-filter-bar-item label="客户" width="100%" append-width="45%">
          <elp-select v-model="small.type" placeholder="客户类型">
            <elp-option label="全部" value="all" />
            <elp-option label="企业" value="company" />
          </elp-select>
          <template #append>
            <elp-input v-model="small.keyword" placeholder="输入关键词" />
          </template>
        </elp-filter-bar-item>
      </elp-filter-bar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const large = reactive({ type: 'all', keyword: '' })
const normal = reactive({ type: 'all', keyword: '' })
const small = reactive({ type: 'all', keyword: '' })
</script>

<style scoped>
.size-stack {
  display: grid;
  gap: 18px;
}

.size-stack p {
  margin: 0 0 6px;
  color: var(--elp-text-color-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
</style>

<template>
  <elp-filter-bar
    :show-search="false"
    :show-reset="false"
    :label-width="90"
    :item-width="300"
  >
    <elp-filter-bar-item label="左对齐" label-align="left">
      <elp-input v-model="left" placeholder="label-align: left" />
    </elp-filter-bar-item>

    <elp-filter-bar-item label="居中" label-align="center">
      <elp-input v-model="center" placeholder="label-align: center" />
    </elp-filter-bar-item>

    <elp-filter-bar-item label="右对齐" label-align="right">
      <elp-input v-model="right" placeholder="label-align: right" />
    </elp-filter-bar-item>
  </elp-filter-bar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const left = ref('')
const center = ref('')
const right = ref('')
</script>

<template>
  <elp-filter-bar
    v-model:expanded="expanded"
    search-text="搜索"
    reset-text="重置"
    expand-text="高级筛选"
    collapse-text="收起筛选"
    show-reset
    collapsible
    @search="handleSearch"
    @reset="handleReset"
  >
    <elp-filter-bar-item label="客户关键词" width="340">
      <elp-input
        v-model="form.keyword"
        placeholder="名称、手机号或备注"
        clearable
      />
    </elp-filter-bar-item>
    <elp-filter-bar-item label="客户状态">
      <elp-select v-model="form.status" placeholder="全部" clearable>
        <elp-option label="跟进中" value="following" />
        <elp-option label="已成交" value="converted" />
        <elp-option label="已流失" value="lost" />
      </elp-select>
    </elp-filter-bar-item>

    <template #advanced>
      <elp-filter-bar-item label="负责人">
        <elp-select v-model="form.owner" placeholder="选择负责人" clearable>
          <elp-option label="李明" value="liming" />
          <elp-option label="王芳" value="wangfang" />
        </elp-select>
      </elp-filter-bar-item>
      <elp-filter-bar-item label="客户等级">
        <elp-select v-model="form.level" placeholder="全部等级" clearable>
          <elp-option label="A级" value="a" />
          <elp-option label="B级" value="b" />
          <elp-option label="C级" value="c" />
        </elp-select>
      </elp-filter-bar-item>
      <elp-filter-bar-item label="活跃日期" width="390">
        <elp-date-picker
          v-model="form.activeRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </elp-filter-bar-item>
    </template>
  </elp-filter-bar>

  <p class="filter-result">
    展开状态：{{ expanded ? '已展开' : '已收起' }}；{{ message }}
  </p>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const initial = () => ({
  keyword: '',
  status: '',
  owner: '',
  level: '',
  activeRange: [] as Date[],
})

const expanded = ref(false)
const form = reactive(initial())
const message = ref('高级条件按需展示')

const handleSearch = () => (message.value = '已提交全部筛选条件')
const handleReset = () => {
  Object.assign(form, initial())
  message.value = '条件已重置'
}
</script>

<style scoped>
.filter-result {
  margin: 12px 0 0;
  color: var(--elp-text-color-secondary);
  font-size: 12px;
}
</style>

<template>
  <elp-filter-bar
    :show-search="false"
    :show-reset="false"
    aria-label="订单筛选"
    @search="message = '订单列表已刷新'"
    @reset="reset"
  >
    <elp-filter-bar-item width="360" grow>
      <template #label>
        <span class="label-with-dot"><i />订单检索</span>
      </template>
      <elp-input v-model="keyword" placeholder="订单号 / 客户名称" clearable />
    </elp-filter-bar-item>

    <elp-filter-bar-item label="风险状态" width="250">
      <elp-segmented v-model="risk" :options="['全部', '正常', '异常']" block />
    </elp-filter-bar-item>

    <template #actions="{ search, reset: resetFilters }">
      <elp-button @click="exportData">导出</elp-button>
      <elp-button @click="resetFilters">清空</elp-button>
      <elp-button type="primary" @click="search">刷新列表</elp-button>
    </template>
  </elp-filter-bar>

  <p class="filter-result">{{ message }}</p>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const keyword = ref('')
const risk = ref('全部')
const message = ref('操作区、标签区和内容区均可通过插槽定制')

const exportData = () => (message.value = '已触发导出操作')
const reset = () => {
  keyword.value = ''
  risk.value = '全部'
  message.value = '筛选条件已清空'
}
</script>

<style scoped>
.label-with-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.label-with-dot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--elp-color-primary);
  box-shadow: 0 0 0 3px var(--elp-color-primary-light-9);
}

.filter-result {
  margin: 12px 0 0;
  color: var(--elp-text-color-secondary);
  font-size: 12px;
}
</style>

<template>
  <div class="config-panel">
    <label>
      尺寸
      <elp-select v-model="config.size" style="width: 110px">
        <elp-option label="Large" value="large" />
        <elp-option label="Default" value="default" />
        <elp-option label="Small" value="small" />
      </elp-select>
    </label>
    <label>
      标签对齐
      <elp-select v-model="config.labelAlign" style="width: 100px">
        <elp-option label="左" value="left" />
        <elp-option label="中" value="center" />
        <elp-option label="右" value="right" />
      </elp-select>
    </label>
    <label>显示筛选 <elp-switch v-model="config.showSearch" /></label>
    <label>显示重置 <elp-switch v-model="config.showReset" /></label>
    <label>高级筛选 <elp-switch v-model="config.collapsible" /></label>
    <label>加载状态 <elp-switch v-model="config.loading" /></label>
  </div>

  <elp-filter-bar
    v-model:expanded="expanded"
    :size="config.size"
    :label-width="100"
    :item-width="480"
    :gap="12"
    :loading="config.loading"
    :show-search="config.showSearch"
    :show-reset="config.showReset"
    :collapsible="config.collapsible"
    search-text="应用"
    reset-text="清空"
    expand-text="更多条件"
    collapse-text="收起条件"
    aria-label="可配置筛选条件"
  >
    <elp-filter-bar-item
      label="业务筛选"
      :label-align="config.labelAlign"
      width="560"
      min-width="360"
      append-width="220"
      aria-label="业务类型和关键词"
      grow
    >
      <elp-select v-model="form.type" placeholder="业务类型">
        <elp-option label="全部" value="all" />
        <elp-option label="新增" value="new" />
        <elp-option label="续费" value="renew" />
      </elp-select>
      <template #append>
        <elp-input v-model="form.keyword" placeholder="输入关键词" clearable />
      </template>
    </elp-filter-bar-item>

    <template #advanced>
      <elp-filter-bar-item label="归属部门" label-align="left">
        <elp-select v-model="form.department" placeholder="全部部门" clearable>
          <elp-option label="销售部" value="sales" />
          <elp-option label="运营部" value="operation" />
        </elp-select>
      </elp-filter-bar-item>
    </template>
  </elp-filter-bar>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

const expanded = ref(false)
const config = reactive({
  size: 'default' as 'large' | 'default' | 'small',
  labelAlign: 'left' as 'left' | 'center' | 'right',
  showSearch: true,
  showReset: false,
  collapsible: false,
  loading: false,
})
const form = reactive({ type: 'all', keyword: '', department: '' })
</script>

<style scoped>
.config-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: var(--elp-border-radius-base);
  background: var(--elp-fill-color-extra-light);
}

.config-panel label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--elp-text-color-secondary);
  font-size: 12px;
  white-space: nowrap;
}
</style>

<template>
  <elp-filter-bar
    :show-search="false"
    :show-reset="false"
    :label-width="96"
    :item-width="300"
  >
    <elp-filter-bar-item
      label="固定宽度"
      label-align="right"
      width="300"
      aria-label="固定宽度筛选项"
    >
      <elp-input v-model="fixedValue" placeholder="width: 300" />
    </elp-filter-bar-item>

    <elp-filter-bar-item
      label="自动扩展"
      label-align="left"
      width="320"
      min-width="260"
      append-width="190"
      aria-label="自动占满剩余空间的筛选项"
      grow
    >
      <elp-select v-model="growType" placeholder="选择类型">
        <elp-option label="全部类型" value="all" />
        <elp-option label="企业客户" value="company" />
        <elp-option label="个人客户" value="personal" />
      </elp-select>

      <template #append>
        <elp-input
          v-model="growKeyword"
          placeholder="grow：占满剩余空间"
          clearable
        />
      </template>
    </elp-filter-bar-item>

    <elp-filter-bar-item
      label-mode="control"
      label-width="170"
      width="620"
      append-width="220"
      aria-label="自定义左侧控件筛选项"
    >
      <template #label>
        <elp-select v-model="field" aria-label="筛选字段">
          <elp-option label="客户名称" value="name" />
          <elp-option label="客户编号" value="code" />
        </elp-select>
      </template>

      <elp-select v-model="operator" aria-label="筛选条件">
        <elp-option label="包含" value="contains" />
        <elp-option label="等于" value="equals" />
      </elp-select>

      <template #append>
        <elp-input v-model="customValue" placeholder="输入筛选值" />
      </template>
    </elp-filter-bar-item>
  </elp-filter-bar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const fixedValue = ref('')
const growType = ref('all')
const growKeyword = ref('')
const field = ref('name')
const operator = ref('contains')
const customValue = ref('')
</script>