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:
@@ -48,9 +48,11 @@
|
|||||||
<!-- 给 UTable 一个 key(tableKey)用于在需要时强制重挂载 -->
|
<!-- 给 UTable 一个 key(tableKey)用于在需要时强制重挂载 -->
|
||||||
<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 来渲染标签外观(badge),slot 会优先显示
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "actions",
|
id: "actions",
|
||||||
|
|||||||
Reference in New Issue
Block a user