如何在v-data-table指定表头列添加复选框且保留默认样式？

不用全量重写表格列定义，直接利用Vuetify的自定义表头插槽就能实现，既可以插入复选框，又不会覆盖默认样式：

核心思路 #

使用v-slot:header-[列的value值]插槽，针对单个指定列的表头进行修改，其他列保持默认渲染逻辑，完全保留表格原有样式。

代码示例 #

<template>
  <v-data-table
    :items="tableItems"
    :headers="tableHeaders"
    class="elevation-1"
  >
    <!-- 给value为"name"的列表头添加复选框，替换成你需要的列value即可 -->
    <template v-slot:header-name="{ header }">
      <v-checkbox
        v-model="selectAll"
        hide-details
        class="mr-2"
      />
      {{ header.text }}
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      tableHeaders: [
        { text: '姓名', value: 'name' },
        { text: '年龄', value: 'age' },
        { text: '邮箱', value: 'email' }
      ],
      tableItems: [
        { name: '张三', age: 26, email: 'zhangsan@test.com' },
        { name: '李四', age: 32, email: 'lisi@test.com' },
        { name: '王五', age: 28, email: 'wangwu@test.com' }
      ]
    }
  },
  watch: {
    selectAll(val) {
      // 可选：实现全选/取消全选逻辑
      this.tableItems.forEach(item => item.selected = val)
    }
  }
}
</script>

关键说明 #

• 插槽命名规则：header-后面跟你要修改的列在headers数组里的value值（如果是自动生成列则对应items里的属性名）。
• 插槽参数header可以获取到该列的原始表头配置，直接用{{ header.text }}就能保留原表头文本，不用手动硬编码。
• 这种方式只修改目标列的表头，其他列的默认样式、渲染逻辑完全不受影响，完美解决你之前覆盖样式的问题。

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