feat(table): enhance item table with sticky header and improved search

This commit introduces two key improvements to the items table. A sticky header and max-height are added for better
usability on long lists. The global search is enhanced to allow filtering by brand and tags. This is achieved by adding
a hidden column for the brand and using an accessorFn to convert the tags array into a searchable string.
This commit is contained in:
xiaomai
2025-10-14 23:07:11 +08:00
parent 070aa8ff5f
commit b00a130114

View File

@@ -48,9 +48,11 @@
<!-- UTable 一个 keytableKey用于在需要时强制重挂载 --> <!-- UTable 一个 keytableKey用于在需要时强制重挂载 -->
<UTable <UTable
:key="tableKey" :key="tableKey"
sticky
v-model:global-filter="globalFilter" v-model:global-filter="globalFilter"
:data="itemsList" :data="itemsList"
:columns="itemColumns" :columns="itemColumns"
class="max-h-[640px]"
> >
<template #select-cell="{ row }"> <template #select-cell="{ row }">
<UCheckbox <UCheckbox
@@ -69,7 +71,8 @@
/> />
<div> <div>
<p class="font-medium text-highlighted"> <p class="font-medium text-highlighted">
<strong>{{ row.original.brand }}</strong> {{ row.original.name }} <strong>{{ row.original.brand }}</strong>
{{ row.original.name }}
</p> </p>
</div> </div>
</div> </div>
@@ -204,6 +207,15 @@ const itemColumns: TableColumn<Item>[] = [
header: "#", header: "#",
cell: ({ row }) => `#${row.getValue("id")}`, cell: ({ row }) => `#${row.getValue("id")}`,
}, },
// 新增一个 brand 列 —— 让它参与全局搜索但不实际渲染内容brand 已在 name-cell 中显示)
{
accessorKey: "brand",
header: "", // 留空,避免影响布局
// 明确允许全局过滤(通常是默认 true但写上更明确
enableGlobalFilter: true,
// 不在表格中重复显示 brand因为你在 name-cell 已经显示了)
cell: () => null,
},
{ {
accessorKey: "name", accessorKey: "name",
header: "标品名称", header: "标品名称",
@@ -211,6 +223,9 @@ const itemColumns: TableColumn<Item>[] = [
{ {
accessorKey: "tags", accessorKey: "tags",
header: "标签", header: "标签",
accessorFn: (row: Item) => (row.tags ?? []).join(" "), // <-- 关键:把数组转成字符串
enableGlobalFilter: true,
// 注意:你仍然使用 template #tags-cell 来渲染标签外观badgeslot 会优先显示
}, },
{ {
id: "actions", id: "actions",