我有一个苗条的页面来显示帖子列表,我需要让用户能够根据几个条件筛选列表,例如:年份、标签、类别等.所有这些条件都应该是并发的,就像亚马逊网站的边栏一样.
使用派生存储时,我得到了一个运行良好的过滤器,但仍然无法同时应用2或3个过滤器.
对于"年"过滤器,我有以下代码:
import { readable, writable, derived } from "svelte/store";
export let data;
let posts = readable(data.posts);
const extractColumn = (arr, column) => arr.map((x) => x[column]);
const allYears = extractColumn(data.posts, "year");
const years = readable ([...new Set(allYears)]);
const filter = writable({ year: null });
const filteredPosts = derived([filter, posts], ([$filter, $posts]) => {
if (!$filter.year) return $posts;
return $posts.filter((x) => x.year === $filter.year);
});
因此,根据帖子列表,我可以得到过滤器的年份数组,然后通过简单的 Select 触发过滤操作,这项工作非常好.
<select bind:value={$filter.year}>
{#each $years as year}
<option value={year}>{year}</option>
{/each}
</select>
正如我在一开始所说的,重点是如何增加这个场景的复杂性,将一个简单的过滤器变成一个系统,并具有数量可变的动态累积过滤器.
谢谢你的建议.