如何使用VUE/Element-UI过滤表

Question

我使用vue与element ui结合使用，我想在表中显示具有状态0的元素。

我通过使用Express，Axios获取我的数据，看起来像这样：

axios.get('http://127.0.0.1:8000/api/tools')
    .then(response => {
        console.log(response);
        this.tools = response.data;
        console.log(JSON.stringify(this.tools));
    })
    .catch((error) => {
        console.log(error);
    })
}

，一切正常。我列出了所有内容，但我想拥有不同的项目标签。因此，我无法在使数据库访问的位置直接过滤。

所以我觉得为什么不直接在桌子中过滤。

所以当前我的桌子头看起来像这样：

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

，您可以看到我已经在搜索栏上使用过滤器。我从文档中的示例中得到了它。但是我真的不知道如何过滤我只得到这些元素，哪个状态为== 0。

所以我添加了" || data.status == 0"。

我的专栏看起来像：

<el-table-column align="center" label="Number" width="95">
    <template slot-scope="scope">
        {{ scope.row.tool_id }}
     </template>
 </el-table-column>

我希望有人有一个主意！

---

在这里整个桌子以更好地理解：

    <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 => !search || data.tool_name.toLowerCase().includes(search.toLowerCase()) || data.status == 0)"
        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>

Answer 1

它看起来像是过滤器逻辑中的一个问题。也许您想使用＆amp; amp;使用data.status == 0逻辑子句。二进制操作员

编辑：请注意逻辑中使用括号。除此之外，您还可以使用===测试平等，包括类型