Vuetify数据表添加水平婴儿车栏

Pat*_*han 8 vuetify.js

我的 vuetify v-data-table 有很多列。现在它会自动压缩到屏幕尺寸。相反,我想要的是向我的 v-data-tale 添加水平滚动条。之前在 1.5 版本中是有的,但在 2 版本中却没有了。

在此输入图像描述

dre*_*ens 7

您可以像在代码笔中一样设置标题中的列宽度。这样你就可以强制滚动条,请参阅添加的codepen

代码笔

 data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name',
          width: "500px"
        },
        { text: 'Calories', value: 'calories', width: "500px" },
        { text: 'Fat (g)', value: 'fat', width: "500px" },
        { text: 'Carbs (g)', value: 'carbs', width: "500px"  },
        { text: 'Protein (g)', value: 'protein', width: "500px" },
        { text: 'Iron (%)', value: 'iron', width: "500px" },
      ],
Run Code Online (Sandbox Code Playgroud)