如何根据列宽动态截断Vuetify v-data-table中的文本？

方案一：用Vuetify内置工具快速实现（推荐） #

不需要手动获取列宽度，直接利用Vuetify的样式和组件就能实现自动截断+hover显示完整内容：

<v-data-table
  :items="yourItems"
  :headers="headers"
>
  <!-- 自定义描述列的显示模板 -->
  <template v-slot:item.description="{ item }">
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <span
          v-bind="attrs"
          v-on="on"
          class="d-block text-truncate"
          style="max-width: 100%;"
        >
          {{ item.description }}
        </span>
      </template>
      <span>{{ item.description }}</span>
    </v-tooltip>
  </template>
</v-data-table>

其中text-truncate是Vuetify内置类，会自动根据容器宽度截断文本并添加省略号；配合v-tooltip，用户hover时可查看完整内容。

方案二：手动获取列宽度自定义截断 #

如果必须基于列的实际宽度做自定义逻辑，可按以下步骤实现：

1. 给表格添加ref标识：

<v-data-table
  ref="dataTable"
  :items="yourItems"
  :headers="headers"
  @update:model-value="handleTableUpdate"
>
  <template v-slot:item.description="{ item }">
    <span>{{ getTruncatedText(item.description) }}</span>
  </template>
</v-data-table>

2. 在组件逻辑中获取列宽度并处理文本：

export default {
  data() {
    return {
      yourItems: [], // 你的数据列表
      headers: [
        // 其他表头...
        { text: '描述', value: 'description' }
      ],
      descriptionColumnWidth: 0
    }
  },
  mounted() {
    this.getColumnWidth()
    // 监听窗口resize，实时更新列宽
    window.addEventListener('resize', this.getColumnWidth)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.getColumnWidth)
  },
  methods: {
    getColumnWidth() {
      this.$nextTick(() => {
        // 获取表头中的描述列元素（根据实际表头索引调整）
        const headerEl = this.$refs.dataTable?.$el?.querySelector('th:nth-child(3)')
        if (headerEl) {
          this.descriptionColumnWidth = headerEl.offsetWidth
        }
      })
    },
    handleTableUpdate() {
      // 表格数据更新后重新获取列宽
      this.getColumnWidth()
    },
    getTruncatedText(text) {
      if (!this.descriptionColumnWidth) return text
      
      // 示例：按字体大小粗略估算可显示字符数（可根据实际字体调整）
      const maxChars = Math.floor((this.descriptionColumnWidth - 20) / 8) // 减去内边距预留空间
      return text.length > maxChars ? `${text.slice(0, maxChars)}...` : text
    }
  }
}

注意：

• 需根据你的表头实际顺序调整列索引
• offsetWidth获取的是列的实际渲染宽度（包含内边距）
• 若要更精确的文本宽度测量，可使用Canvas API计算文本实际像素宽度，避免字符宽度不一致问题

内容的提问来源于stack exchange，提问作者geschema