每页行选项显示为 3 个点

问题描述

我正在使用 v-data-table 和带有 3 个点的 pooter apeare 中的每页行，如下所示：

知道为什么吗？

这是我的代码：

<v-data-table v-if="setupHistory.length > 0" :headers="setupHistoryHeaders" :items="setupHistory" :expanded="expanded" item-key="_id" :items-per-page="5" @click:row="GetActionsForExpanded">
  <template v-slot:expanded-item="{ headers }">
                  <td :colspan="headers.length">
                    <actions
                      :actions="expandedActions"
                      top="500"
                      width="800"
                    ></actions>
                  </td>
                </template>
  <template v-slot:item.date="{ item }">
                  <span>{{ (" " + item.date) | formatDate }}</span>
                </template>

  <template v-slot:item.status="{ item }">
                  <v-icon
                    :color="getStatusIconColor(getItemStatus(item))"
                    >{{ " " + getStatusIcon(getItemStatus(item)) }}</v-icon
                  >
                  <span>{{ " " +  getItemStatus(item)}}</span>
                </template>
</v-data-table>

解决方法

您是否尝试过获取此 div 类，然后在样式部分中为该类设置最小宽度？
记得创建没有 scoped 属性的 <style> 部分，否则不会改变子组件

v-data-table vue.js