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