数据表:分页箭头和行选择框不显示

Question

当我的v-data-table呈现时，用于分页的<>箭头是不可见的。你可以点击他们应该在哪里，它工作，但他们只是看不见(页面计数显示)。

此外，当我打开行选择(show-select)时，这也不显示，尽管您可以单击它(出现一个快速淡入淡出的圆圈的简短图像，但框本身永远不会出现)。

另外，关于show-select，如果我使用一个槽来使用和s显示我的数据，我如何使用show-select呢？似乎当我这样做的时候，"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“属性呢？

Answer 1

我也有同样的问题。这是因为你没有添加vuetify的图标字体。如果您转到plugins/vutify.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/