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>

在那里，您可以看到我已经在搜索栏中使用过滤器。我是从example in the Doc获得的。但是我真的不知道如何过滤我只能得到那些元素，即“状态” ==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

在您的过滤器逻辑中似乎有问题。也许您想将data.status == 0逻辑子句与&&二进制运算符一起使用

编辑：注意在逻辑中使用括号。除此之外，您可以使用===来测试相等性，包括类型

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

1 个答案: