html - Vuetify 数据表 : Ellipsis overflow for specific columns

Question

我有一个像这样的基本数据表:

<v-data-table
  :headers="headers"
  :items="documents"
  :items-per-page="10"
  :loading="loading"
  :search="search"
  :footer-props="footer_props"
  :single-select="true"
  v-model="selected"
  item-key="artifactID"
  class="elevation-1"
  style="width: 100%; align-content: center;"
  height="45vh"
  fixed-header
  show-select
>
  <v-progress-linear 
    slot="progress" 
    color="blue" 
    indeterminate
  />
  <v-alert 
    slot="no-results" 
    :value="true" 
    color="error" 
    icon="warning"
  >
    Your search for "{{ search }}" found no results.
  </v-alert>
</v-data-table>

它有 4 列，另外还有一列自动生成到左侧以供单选。我设法通过定义标题的宽度来定义每列的宽度。

当文本的长度超过为标题指定的宽度时，我想让特定列的单元格的内容用省略号截断。

它尝试使用 item.name 插槽和具有定义 CSS 样式的 div，如下所示:

<template v-slot:item.rawDataFile.fileName="{ item }">
  <div 
    v-on="on"
    style="white-space: nowrap; width:100%;"
  >
    <span style="display: inline-block; overflow: hidden; text-overflow: ellipsis; width:100%;">
      {{ item.rawDataFile.fileName }}
    </span>
  </div>
</template>

但它没有用。而不是截断，当文本真的很长时，它反而增加了列的宽度，这与我想要的完全相反。如果我指定了 50% 之类的东西，列的宽度仍然会被扩展，就好像文本没有被截断一样，但文本本身将被截断 50%，使它看起来很奇怪。

有没有办法让我将列宽固定为为标题指定的宽度，并在超过此宽度时截断文本，而不是像数据表默认的行为那样转到下一行，如果可能，请执行这仅适用于特定列？

Answer 1

如果您设置 max-width，它应该可以工作与标题中定义的宽度相同...

    <template v-slot:item.rawDataFile.fileName="{ item }">
        <div class="text-truncate" style="max-width: 130px;">
           {{ item.rawDataFile.fileName }}
        </div>
    </template>

查看 item.address本例中的槽模板:https://codeply.com/p/rudOI4zo5D