v-data-table内部数据显示为单行的问题

Question

我正在制作一个简单的 v-data-table（带有 vuetify 的 vue2）。大多数内部列数据大小都很短（5~20 字节），但一列超过 500 字节。

我以为定义页眉宽度会设置为多行，但它不起作用。

我该如何解决这个问题

屏幕是这样的：

____________________________________________________________________________________
|header 1  | header2                                           | header 3| header4 |
------------------------------------------------------------------------------------
| sdfsdfsdf| this is problem sososososososo long long long long|   1234   | 567567 |  
------------------------------------------------------------------------------------
=> i want multiline
__________________________________________________________________
|header 1  | header2                         | header 3| header4 |
------------------------------------------------------------------
| sdfsdfsdf| this is problem sosos           |   1234   | 567867 |
           |  ososososo long long long long  |          |        |  
------------------------------------------------------------------

<v-data-table :headers="headers" :items="checksumList" class="elevation-1" fixed-header width="300px" height="685px">

  headers: [
    { text: 'id', value: 'id', sortable: false },
    { text: 'name', value: 'name', sortable: false },
    { text: 'hash', value: 'hash', sortable: false, width : "20px" },
    { text: 'display_name', value: 'display_name', sortable: false, width : "20px"},
  ],

Answer 1

如果您使用的是 vuetify 2.6.0+，您可以直接在 headers 数组中定义单元格 class。然后它将应用于一列中的每个 <td> 标记。

这样，举个例子：

<v-data-table
  :headers="headers"
  :items="desserts"
/>
...
data () {
  return {
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
        cellClass: 'width-400'
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      ...
    ],
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        ...
      },
      {
        name: 'Ice cream sandwich with a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long name',
        calories: 237,
        fat: 9.0,
        ...
      },
      ...
    ]
  }
}
...
<style>
.width-400 {
  width: 400px
}
</style>

测试这个at CodePen

v-data-table内部数据显示为单行的问题

The problem that the internal data of v-data-table is displayed as a single line

vuejs2

vuetify.js