如何为v-data-table的展开箭头添加动态展开标题EXPAND

方案一：利用内置插槽快速实现 #

Vuetify 的 v-data-table 提供了专门插槽用于自定义展开列的表头和行内容，直接使用就能满足需求：

<v-data-table
  v-if="userRoleId != 3"
  class="DepartmentTable dataTableExpensionTable"
  :items="missedRecords"
  :search="search"
  :headers="userHeaders"
  item-value="id" 
  id="table-to-export"
  show-expand
  dense
>
  <!-- 自定义展开列的表头文本 -->
  <template v-slot:header.expand>
    <span>
      <v-icon>mdi-chevron-down</v-icon>
      任务详情
    </span>
  </template>

  <!-- 自定义每行展开箭头旁的动态标题 -->
  <template v-slot:item.expand="{ props }">
    <span>
      <v-btn icon @click="props.expanded = !props.expanded">
        <v-icon>{{ props.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
      </v-btn>
      <!-- 动态绑定标题，示例用任务列表数量展示 -->
      {{ `(${props.item.userTaskList.length}项任务)` }}
    </span>
  </template>

  <!-- 原有展开行内容保持不变 -->
  <template v-slot:expanded-row="{ columns, item }">
    <td :colspan="columns.length">
      <v-data-table-virtual
        class="subDataTables"
        :headers="timeStudyHeadersTransplantSub"
        :items="item.userTaskList"
        hide-default-footer
      >
      </v-data-table-virtual>
    </td>
  </template>
</v-data-table>

方案二：完全自定义展开列（更灵活） #

如果需要调整整体表头布局，可以手动实现展开列，不再依赖show-expand属性：

1. 确保userHeaders中无自动生成的展开列：

// 示例表头配置
const userHeaders = [
  { text: '用户名', value: 'username' },
  { text: '部门', value: 'department' },
  // 其他业务列...
]

2. 修改模板，手动添加展开列并控制展开状态：

<v-data-table
  v-if="userRoleId != 3"
  class="DepartmentTable dataTableExpensionTable"
  :items="missedRecords"
  :search="search"
  :headers="userHeaders"
  item-value="id" 
  id="table-to-export"
  dense
>
  <!-- 自定义完整表头 -->
  <template v-slot:header="{ headers }">
    <thead>
      <tr>
        <th>
          <v-btn icon @click="toggleAllExpand">
            <v-icon>mdi-chevron-down</v-icon>
          </v-btn>
          <span>任务详情</span>
        </th>
        <!-- 渲染其他业务列表头 -->
        <th v-for="header in headers" :key="header.value">{{ header.text }}</th>
      </tr>
    </thead>
  </template>

  <!-- 自定义每行内容 -->
  <template v-slot:item="{ item, expanded, toggleExpand }">
    <tr>
      <td>
        <v-btn icon @click="toggleExpand(item)">
          <v-icon>{{ expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
        </v-btn>
        <!-- 动态标题，可根据item任意字段生成 -->
        {{ `${item.userName}的任务(${item.userTaskList.length}项)` }}
      </td>
      <!-- 渲染其他业务列内容 -->
      <td v-for="header in userHeaders" :key="header.value">{{ item[header.value] }}</td>
    </tr>
  </template>

  <!-- 展开行内容，注意colspan要加1（新增的展开列） -->
  <template v-slot:expanded-row="{ columns, item }">
    <td :colspan="columns.length + 1">
      <v-data-table-virtual
        class="subDataTables"
        :headers="timeStudyHeadersTransplantSub"
        :items="item.userTaskList"
        hide-default-footer
      >
      </v-data-table-virtual>
    </td>
  </template>
</v-data-table>

3. 添加全展开/折叠方法（可选）：

// 组件methods中添加
toggleAllExpand() {
  this.missedRecords = this.missedRecords.map(record => ({
    ...record,
    _expanded: !record._expanded
  }))
}

关键提示 #

• 动态标题可根据item的任意属性生成，比如用户名、任务数量等，只需修改模板中的绑定内容即可。
• 内置插槽方案更简洁，适合无需调整整体布局的场景；完全自定义方案自由度更高，适合复杂布局需求。

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