vuetify 数据表组件未正确加载答案

【问题标题】：vuetify data table component not loading up correctlyvuetify 数据表组件未正确加载
【发布时间】：2018-08-14 19:43:27
【问题描述】：

Vue 数据组件未正确加载。这是他们使用的确切模板。箭头显示为“arrow_upward”，并且编辑和删除按钮未正确显示。

我已经在 main.js 中导入了所有 vuetify 的东西。除了这个之外，我所有的其他 vuetify UI 组件都在工作。

【问题讨论】：

【解决方案1】：

我遇到了类似的问题。按照提供的链接 mdg，我通过将 iconfont 从 mdi 更改为 mdiSvg 来解决问题

const opts = {
  icons: {
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
  },
}

vuetify: new Vuetify(opts),

【讨论】：

【解决方案2】：

正如 Traxo 所说，您需要包含 Google 材料图标字体。有两种解决方案：

将 css 链接 <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> 添加到您的 <head>，
使用提供 Google 材质图标的可用 npm 包之一，并像使用其他包一样导入 css

【讨论】：

【解决方案3】：

检查 packages.json 并确保 webpack 是最新的但是，请确保在 main.js 中包含以下内容 import 'vuetify/dist/vuetify.min.css' // 确保你使用的是 css-loader

【讨论】：

【解决方案4】：

我特地调出字体：

Vue.use(Vuetify, {
  iconfont: 'mdi'
}

并且已经安装好了。

$ npm install material-design-icons-iconfont

【讨论】：