jingrowlocal/jingrow-framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化列表页过滤栏

Browse Source
This commit is contained in:
jingrow 2025-10-25 23:05:26 +08:00
parent 31430cf6b5
commit b9363f6f37
1 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/jingrow/frontend/src/core/components/FilterBar.vue
View File

@ -21,7 +21,8 @@
:placeholder="getFieldPlaceholder(field)"
clearable
size="small"
@input="onFilterChange"
@blur="onFilterChange"
@update:value="onInputChange"
/>
</div>
@ -34,6 +35,7 @@
clearable
size="small"
@update:value="onFilterChange"
@clear="onFilterChange"
/>
</div>
@ -47,6 +49,7 @@
clearable
size="small"
@update:value="onFilterChange"
@clear="onFilterChange"
/>
</div>
@ -62,6 +65,7 @@
clearable
size="small"
@update:value="onFilterChange"
@clear="onFilterChange"
/>
</div>
@ -72,7 +76,8 @@
:placeholder="getFieldPlaceholder(field)"
clearable
size="small"
@update:value="onFilterChange"
@blur="onFilterChange"
@update:value="onInputChange"
/>
</div>
@ -84,6 +89,7 @@
clearable
size="small"
@update:value="onFilterChange"
@clear="onFilterChange"
/>
</div>
@ -94,7 +100,8 @@
:placeholder="getFieldPlaceholder(field)"
clearable
size="small"
@input="onFilterChange"
@blur="onFilterChange"
@update:value="onInputChange"
/>
</div>
</div>
@ -247,6 +254,14 @@ function onFilterChange() {
emit('filter-change', { ...filters.value })
}
// 输入框值变化处理（用于清除按钮）
function onInputChange(value: any) {
// 如果值被清空（null, undefined, 空字符串），立即触发过滤
if (value === null || value === undefined || value === '') {
onFilterChange()
}
}
// 清除所有过滤条件
function clearAllFilters() {
filters.value = {}
@ -313,8 +328,6 @@ watch(() => props.modelValue, (newValue) => {
display: flex;
align-items: center;
padding: 4px 8px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 4px;
transition: all 0.2s ease;
min-width: 0;
@ -322,11 +335,10 @@ watch(() => props.modelValue, (newValue) => {
.filter-item.has-value {
background: #f0f9ff;
border-color: #3b82f6;
}
.filter-item:hover {
border-color: #cbd5e1;
background: #f3f4f6;
}
.filter-input {