feat(filter): 筛选抽屉每个字段可单独清空

每行加 CircleClose 清空按钮(有值才出现),只摘掉该 key、其余条件不动。
比依赖各字段组件自身 clearable 更通用(range/relation/必填字段筛选时也能清)。
This commit is contained in:
2026-06-30 17:30:16 +08:00
parent 09ad43007a
commit 6b0a6118e0
2 changed files with 48 additions and 6 deletions
+47 -5
View File
@@ -4,11 +4,18 @@
<el-form :model="localFilterData">
<template v-for="field in filterableFields" :key="field.key">
<el-form-item :label="vueAdmin.t(field.label)">
<slot :name="`filter-${field.key}`" :field="field" :data="localFilterData">
<component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)" :field="field"
:model-value="localFilterData[field.key]"
@update:model-value="onFieldChange(field.key, $event)" mode="filter" />
</slot>
<div class="filter-field-row">
<div class="filter-field-control">
<slot :name="`filter-${field.key}`" :field="field" :data="localFilterData">
<component :is="vueAdmin.getFieldComponent(moduleKey, field.type, field.key)"
:field="field" :model-value="localFilterData[field.key]"
@update:model-value="onFieldChange(field.key, $event)" mode="filter" />
</slot>
</div>
<!-- 单独清空该字段:仅在有值时出现,点了只删这一个 key -->
<el-button v-if="hasValue(field.key)" link :icon="CircleClose" class="filter-clear"
@click="clearField(field.key)" />
</div>
</el-form-item>
</template>
</el-form>
@@ -21,6 +28,7 @@
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { CircleClose } from '@element-plus/icons-vue'
import { IFieldConfig } from '../IShrimpType'
import { vueAdmin } from '../VueAdmin'
@@ -68,6 +76,21 @@ function onFieldChange(key: string, value: any) {
localFilterData.value = { ...localFilterData.value, [key]: value }
}
// 该字段当前是否有筛选值(决定单独清空按钮是否出现);范围 {gte,lte}/数组按内容判空
function hasValue(key: string): boolean {
const v = localFilterData.value[key]
if (v == null || v === '') return false
if (Array.isArray(v)) return v.length > 0
if (typeof v === 'object') return Object.keys(v).length > 0
return true
}
// 单独清空某个字段:只摘掉这一个 key,其余筛选条件不动
function clearField(key: string) {
const { [key]: _, ...rest } = localFilterData.value
localFilterData.value = rest
}
function handleReset() {
closedByReset.value = true
localFilterData.value = {}
@@ -101,4 +124,23 @@ function handleConfirm() {
.shrimp-drawer .el-drawer__body .el-form-item {
margin-bottom: 20px;
}
.filter-field-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.filter-field-control {
flex: 1;
min-width: 0;
}
.filter-clear {
flex: none;
padding: 0;
font-size: 16px;
color: var(--el-text-color-secondary);
}
</style>