每页行数选项以 3 个点显示

Question

我在 pooter apeare 中使用 v-data-table 和 row-per-page 3 个点如下：

知道为什么吗？

这是我的代码：

<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>

Answer 1

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

每页行数选项以 3 个点显示

Rows per page options appear with 3 dots

vue.js

v-data-table