如何控制Vuetify可展开v-data-table的展开图标位置？

查看Vuetify可展开行的官方示例可知，v-data-table的展开图标默认显示在每行右侧，官方示例效果如下：

自行实现功能时，展开箭头却显示在表格行左侧，未找到控制该图标位置的方法，实现代码如下：

<v-data-table
  :headers="headers"
  :items="inputs"
  item-key="id"
  disable-pagination
  dense
  show-expand
  single-expand
  hide-default-footer
>
  <template v-slot:[`item.value`]="{ item }">
    <v-progress-linear
      height="22"
    ></v-progress-linear>
  </template>
  <template v-slot:expanded-item="{headers, item}">
    <td :colspan="headers.length">
      <InputDetails
        :input="item"
      />
    </td>
  </template>
</v-data-table>

问题原因&解决方法 #

展开图标跑到左侧，是headers配置不正确导致的：

• 开启show-expand后，Vuetify会自动注入一个value为data-table-expand的特殊列用来放置展开按钮。如果你的headers数组里没有显式声明这个列，组件会默认把它插到所有列的最前面，也就是行最左侧的位置。
• 要把展开按钮固定到行最右侧，只需要在headers数组的最后一项显式加上这个特殊列的配置即可，示例：

headers: [
  // 保留你原有的其他列配置
  { text: '参数名', value: 'name' },
  { text: '进度值', value: 'value' },
  // 追加到数组末尾，展开列就会显示在最右侧
  { text: '', value: 'data-table-expand', width: '48px' }
]

• 配置里的width属性可以自定义展开列的宽度，按需调整即可。

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