如何调换Vuetify 2数据表格默认选择与展开列的顺序？

有两种简易方法可以实现需求，无需自行重写选择或展开功能：

方法一：通过表头数组自定义列顺序（推荐） #

Vuetify 支持通过在 headers 数组中添加特殊值的表头项，来控制选择框和展开图标的位置。只需将 data-table-select（选择框列）和 data-table-expand（展开图标列）按你想要的顺序放在表头数组最前面即可：

修改后的表头数组示例 #

headers: [
  { text: '', value: 'data-table-select' }, // 首列显示选择框
  { text: '', value: 'data-table-expand' }, // 第二列显示展开图标
  { text: '名称', value: 'name' },
  { text: '描述', value: 'description' },
  // 其他自定义表头项...
]

修改后的组件代码 #

<v-data-table
  :headers="headers"
  :items="items"
  show-select
  show-expand
  item-key="id"
>
  <template v-slot:expanded-item="{ item }">
    <!-- 注意：由于选择和展开列已包含在headers数组中，colspan直接使用headers.length即可 -->
    <td :colspan="headers.length">{{ item }}</td>
  </template>
</v-data-table>

这种方式完全利用 Vuetify 内置的功能，能可靠保留所有默认的选择、展开行为，且不会依赖 DOM 结构的变化。

方法二：通过 CSS 调整列顺序 #

如果不想修改表头数组，可以用 CSS 直接调换前两列的顺序：

/* 调整表头列顺序 */
.v-data-table__header tr > th:first-child {
  order: 2;
}
.v-data-table__header tr > th:nth-child(2) {
  order: 1;
}

/* 调整表格内容行的列顺序 */
.v-data-table__tbody tr > td:first-child {
  order: 2;
}
.v-data-table__tbody tr > td:nth-child(2) {
  order: 1;
}

注意：这种方法依赖默认的列顺序（展开列第一、选择列第二），如果后续添加其他自定义前置列，需要调整 CSS 中的选择器，不如方法一稳定。

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