如何限制v-data-table列宽？width/maxWidth设置不生效的解决办法

在v-data-table的headers配置中为「Video title」列设置width: '30%'以限制列宽，但实际列宽超出指定比例；尝试使用maxWidth: '30%'也未解决问题。相关代码如下：

<v-data-table
  :loading="loading"
  :headers="headers"
  :items="rankedItems"
  :server-items-length="itemCount"
  :disable-sort="true"
  :hide-default-footer="true"
  class="elevation-1"
>
  <template #item.rank="{ item }">
    #{{ item.rank }}
  </template>
  <template #item.user="{ item }">
    <user-chip
      :uid="item.uid"
      :nickname="item.name"
      :avatar-url="item.avatar"
    />
  </template>
  <template #item.value="{ item }">
    {{ $n(item.value) }}
  </template>
  <template #item.gv="{ item }">
    {{ $n(item.gv) }}
  </template>
  <template #item.title="{ item }">
    <v-chip
      :to="{ name: 'videoPlay', params: { id: item.vid } }"
      target="_blank"
      outlined
      label
    >
      {{ item.title }}
    </v-chip>
  </template>
</v-data-table>

computed: {
  headers () {
    return [
      { text: '', value: 'rank', width: '20%' },
      { text: 'Name', value: 'user', width: '30%' },
      { text: 'Video title', value: 'title', width: '30%' },
      { text: 'value', value: 'gv', width: '20%' },
    ]
  },
}

请问该如何正确限制该列的宽度？

• 控制单元格内容的换行与溢出：问题核心是v-chip组件默认不会自动换行，会撑大列宽。给v-chip添加CSS样式强制换行并限制溢出：

  <template #item.title="{ item }">
    <v-chip
      :to="{ name: 'videoPlay', params: { id: item.vid } }"
      target="_blank"
      outlined
      label
      style="white-space: normal; word-wrap: break-word; max-width: 100%;"
    >
      {{ item.title }}
    </v-chip>
  </template>
  

• 设置表格固定布局模式：给v-data-table添加自定义CSS，将表格布局设为fixed，让列宽严格按比例分配：

  <v-data-table
    :loading="loading"
    :headers="headers"
    :items="rankedItems"
    :server-items-length="itemCount"
    :disable-sort="true"
    :hide-default-footer="true"
    class="elevation-1 fixed-table"
  >
    <!-- 其他模板内容 -->
  </v-data-table>
  

  对应的全局或组件内CSS：

  .fixed-table table {
    table-layout: fixed !important;
  }
  

• 优化headers配置：确保所有列宽比例总和为100%，同时给目标列同时设置width和maxWidth：

  headers () {
    return [
      { text: '', value: 'rank', width: '20%', maxWidth: '20%' },
      { text: 'Name', value: 'user', width: '30%', maxWidth: '30%' },
      { text: 'Video title', value: 'title', width: '30%', maxWidth: '30%' },
      { text: 'value', value: 'gv', width: '20%', maxWidth: '20%' },
    ]
  },
  

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