如何使用单独的 JS 函数过滤/搜索元素 UI 表答案

【问题标题】：How to filter/search Element UI table with separate JS function如何使用单独的 JS 函数过滤/搜索元素 UI 表
【发布时间】：2020-02-04 11:40:33
【问题描述】：

我正在 Vue (https://element.eleme.io/#/en-US/component/table) 中构建一个 Element 表，该表需要有一个搜索块，用于在您输入文本时过滤行。如果搜索块文本出现在 2-3 列中的任何一列中，则需要显示该行。提供的示例仅针对一列（名称）执行此操作。

<el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">

如何分解代码以使其成为可以为多个列添加的单独函数？

【问题讨论】：

您可以分离filters并接收filters中的参数并共同使用它们。请参阅文档。 vuejs.org/v2/guide/filters.html

标签： vue.js vuejs2

【解决方案1】：

你试过这种方法吗？

方法

methods: {
 searchData(dataTable, query) {
   return dataTable.filter(data => !search || `data.${query}.toLowerCase().includes(search.toLowerCase())`)
 }
}

表格

<el-table
    :data="searchData(tableData, name)" // attach your query here
    style="width: 100%">

【讨论】：

我最终没有使用第二个参数，而只是在一个函数内的所有过滤器中使用字符串，因为我知道将过滤哪些列。