Question

好的，所以我有一个v-data-table，其中一列有条件地显示checkmark图标或x图标：

<v-data-table :headers="headers" :items="items" item-key="id">
    <template v-slot:headers="props">
        <tr>
            <th v-for="header in props.headers" :key="header.text">{{ header.text }}</th>
        </tr>
    </template>
    <template v-slot:items="props">
        <tr>
            <td>{{ props.item.id }}</td>
            <td>{{ props.item.name }}</td>
            <td>
                <v-icon v-if="props.item.status === 1" color="light-green">fas fa-check</v-icon>
                <v-icon v-if="props.item.status === 0" color="red">fas fa-times</v-icon>
            </td>
        </tr>
    </template>
</v-data-table>

问题是：：在对表中的数据进行分页时，v-if评估结果不同的行保持呈现状态，因为它们不会消失，而是实际上附加了更多图标而不是替换那里的东西。

假设在第1页上，第三行的状态为0，因此它呈现了x，然后在第2页上，第三行的状态为1，但没有显示checkmark，而是显示x checkmark。然后，我切换回第1页，它仍然显示x checkmark ...然后，当我返回第2页时，它显示x checkmark checkmark，依此类推。

还有其他人遇到过这个问题吗？

我尝试改用v-show，但是这也很奇怪-它仅呈现第一页的结果，并且在切换页面时不会更改。我想也认为是错误。

Answer 1

哦，麻烦了。在该项目中，有一个实用程序可以将FA图标转换为SVG，并且这样做可以覆盖v-data-table的默认行为。切换到“材质”图标，效果很好。

审核v-data-table v-if问题

1 个答案: