如何在Vue+Element-UI中过滤表格仅显示status为0的数据

我一眼就看出你过滤逻辑的问题啦——你用的||逻辑把条件搞成了「满足任意一个就显示」，但你实际需要的是「必须status为0，同时满足搜索条件」，所以逻辑顺序和运算符得调整下。

问题根源 #

你当前的过滤表达式：

tools.filter(data => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()) || data.status == 0)

这个逻辑意味着：只要没有搜索词，或者工具名匹配搜索，或者status是0，这条数据就会被显示。这就导致当没有搜索词时，所有数据（不管status是不是0）都会展示出来，完全不符合你“仅显示status=0”的需求。

正确的过滤实现 #

你需要把逻辑改成：必须status等于0，并且（没有搜索词，或者工具名匹配搜索），用&&将status条件和搜索条件绑定在一起，修改后的表达式如下：

tools.filter(data => data.status === 0 && (!search || data.tool_name.toLowerCase().includes(search.toLowerCase())))

修改后的完整表格代码 #

替换掉原来的:data绑定部分即可：

<el-tab-pane label="Verfügbare Werkzeuge">
  <el-input placeholder="Werkzeug suchen..." v-model="search" class="search-form">
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
  <el-table 
    :data="tools.filter(data => data.status === 0 && (!search || data.tool_name.toLowerCase().includes(search.toLowerCase())))" 
    border 
    fit 
    highlight-current-row
  >
    <el-table-column align="center" label="Werkzeugnummer" width="95">
      <template slot-scope="scope">
        {{ scope.row.tool_id }}
      </template>
    </el-table-column>
    <el-table-column label="Bezeichnung" width="120">
      <template slot-scope="scope">
        {{ scope.row.tool_name }}
      </template>
    </el-table-column>
    <el-table-column class-name="status-col" label="Status" width="110" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status | nameFilter }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="letzter Verantwortlicher" width="120">
      <template slot-scope="scope">
        {{ scope.row.used_by }}
      </template>
    </el-table-column>
    <el-table-column align="center" prop="actual_return_time" label="letzte Rückgabe" width="150">
      <template slot-scope="scope">
        <i class="el-icon-time"/>
        <span>{{ scope.row.actual_return_time }}</span>
      </template>
    </el-table-column>
  </el-table>
</el-tab-pane>

进阶优化：抽成计算属性（更易维护） #

如果后续还要调整过滤规则，直接在模板里写逻辑会越来越乱，建议把过滤逻辑抽成Vue的计算属性：

// 在Vue组件的computed选项中添加
computed: {
  filteredAvailableTools() {
    return this.tools.filter(data => {
      // 先判断搜索匹配条件
      const matchesSearch = !this.search || data.tool_name.toLowerCase().includes(this.search.toLowerCase());
      // 再结合status条件返回结果
      return data.status === 0 && matchesSearch;
    });
  }
}

然后表格直接绑定计算属性：

<el-table :data="filteredAvailableTools" border fit highlight-current-row>

这样模板更简洁，逻辑也更清晰，后续修改过滤规则只需要调整计算属性即可。

内容的提问来源于stack exchange，提问作者SnakeEyes