Question

我有一个概览表，在这里列出了所有元素。但是我对它们进行了分页，以便仅显示10个元素。

我的桌子看起来像这样：

<el-table
  :data="paginatedData.filter(data => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()))"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

基本上，paginatedData包含10个元素。变量“工具”包含所有可用元素。

我想保留分页，但同时我需要搜索工具的每个元素，而不仅仅是我的paginatedData中的10个。

所以我试图将其更改为：

<el-table
  :data="paginatedData.filter(tools => !search || tools.tool_name.toLowerCase().includes(search.toLowerCase()))"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

我想我只是遇到一些问题，无法找到正确的语法来解决我的问题。

希望你们有个主意...

Answer 1

在此示例中，数据分为三个级别：

未过滤的数据集；
已根据您的搜索词过滤的数据集（假定正在使用搜索词，否则它将等于未过滤的数据集）；和
分页数据，您希望将其分为每十个条目的包。

这建议您使用四个变量：

const data：具有至少一个属性tool_name
let filteredData：以上内容的子集，经过过滤后，tool_name.toLowerCase() === search.toLowerCase()
let currentPageData：已过滤数据的子集，其中项目的索引对应于当前页面，即页面1 =索引为0-9的条目，页面2 =索引为10-19的条目等。
let currentPage: number一个用于存储当前页面的变量。

在初始页面加载时，您希望将currentPage初始化为1。因此，填充表的逻辑是：

<el-table
  :data="currentPageData"
  border
  fit
  highlight-current-row>
  <!-- table content -->
</el-table>

哪里

filteredData = !search ? data : data.filter((entry) => entry.tool_name.toLowerCase() === search.toLowerCase())
currentPageData = filteredData.filter((entry, index) => (index < (currentPage * 10) - 1 && index > ((currentPage - 1) * 10)))

即如果进行搜索，则将根据过滤的数据对其进行过滤，否则，将filterData设置为data。然后，currentPageData使用currentPage变量提取与所选当前页面相对应的十个条目。我假设您可以处理如何向表中添加按钮以选择不同的页面。

很显然，这不是一个完整的解决方案，但是应该给出一些如何实现的想法。

如何同时对表进行分页并通过所有内容进行搜索？

1 个答案: