数据表：未显示分页箭头和行选择框

Posted 2023-02-22

【中文标题】数据表：未显示分页箭头和行选择框

【英文标题】：Data Table: Pagination Arrows & Row Select Box Not Displayed

【发布时间】：2019-12-10 03:51:26

【问题描述】：

当我的 v-data-table 呈现时，用于分页的 箭头不可见。您可以单击它们应该在的位置，它可以工作，但它们只是不可见（确实出现页数）。

另外，当我打开行选择 (show-select) 时，虽然您可以单击它，但它也不会显示（出现一个简短的图像，显​​示一个快速消失的圆圈，但框本身永远不会出现）。

另外，关于show-select，如果我使用slot来显示我的数据，使用and s，我该如何使用show-select？似乎当我这样做时，“显示选择”被忽略了。

我正在使用 2.0.1 的 Vuetify (https://cdn.jsdelivr.net/npm/vuetify@2.0.1/dist/vuetify.min.css & js) 和 2.6.10 的 Vue (https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js)。

                <v-data-table 
                :headers="headers" 
                :items="items" 
                style="cursor:pointer"
                item-key="id"
                class="elevation-10"
                >
                    <template slot="item" slot-scope="props">
                        <tr @dblclick="$root.openViewer(props.item.id)">
                            <td>props.item.id</td>
                            <td>props.item.name</td>
                            <td>props.item.dateposted</td>
                            <td>props.item.periodstart</td>
                            <td>props.item.periodend</td>
                            <td v-if="props.item.released.toLowerCase()=='in progress'"><v-icon center color="red">fas fa-user-clock</v-icon></td>
                            <td v-else><v-icon center color="green">fas fa-user-check</v-icon></td>
                        </tr>
                    </template>
                </v-data-table>

在第一种情况下，我希望显示“”页面按钮。

在第二种情况下，当我使用 v-data-grid 的默认渲染时，即我不使用插槽并包含“show-select”道具时，虽然不会出现行选择框您可以单击它（就像 按钮一样）。

此外，如果我确实使用插槽来呈现我的行，我如何还使用“show-select”道具？

【问题讨论】：

有趣。我遇到了完全相同的问题（页脚分页根本不起作用，并且显示选择框不显示，尽管您可以选择）。可悲的是，您在这里没有发布任何答案/线索:(

【参考方案1】：

我也有同样的问题。那是因为你没有添加 vuetify 的图标字体。如果你去 plugins/vuetify.js，然后做：

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify(
  icons: 
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  ,
)

它应该像一个魅力。因为 属于 vuetify 的 mdi 字体类。

https://vuetifyjs.com/en/features/icon-fonts/