Vue 2中如何为Vuetify Datatable添加多个展开触发器？

Vuetify默认的展开行机制依赖全局expanded状态管理，无法直接实现多组不同内容的独立展开行。要满足你的需求，需要手动为每个数据项维护多个独立的展开状态，并通过自定义表格body模板来渲染主行和多组展开行。

实现步骤 #

1. 为数据项添加独立展开状态：在获取或初始化数据时，给每个条目添加两个布尔状态（比如isExpandedDetails和isExpandedCustomers），分别控制两组展开行的显示。
2. 自定义表格Body：使用#body模板完全接管表格内容渲染，自由插入主数据行和多组展开行。
3. 添加多组触发器：在主行中放置两个图标按钮，分别切换对应的展开状态。
4. 控制展开行显示：根据每个数据项的状态，渲染对应的展开行内容。

完整代码示例 #

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    hide-default-footer
  >
    <!-- 自定义表格主体 -->
    <template #body="{ items }">
      <tbody>
        <template v-for="item in items" :key="item.id">
          <!-- 主数据行 -->
          <tr>
            <!-- 第一个展开触发器：控制详情面板 -->
            <td>
              <v-chip 
                color="indigo" 
                @click="item.isExpandedDetails = !item.isExpandedDetails"
                small
              >
                <v-icon color="white" size="small">
                  {{ item.isExpandedDetails ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
                </v-icon>
              </v-chip>
            </td>
            <!-- 第二个展开触发器：控制客户列表面板 -->
            <td>
              <v-chip 
                color="teal" 
                @click="item.isExpandedCustomers = !item.isExpandedCustomers"
                small
              >
                <v-icon color="white" size="small">
                  {{ item.isExpandedCustomers ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
                </v-icon>
              </v-chip>
            </td>
            <!-- 其他业务列 -->
            <td>{{ item.name }}</td>
            <td>{{ item.status }}</td>
          </tr>

          <!-- 第一组展开行：详情内容 -->
          <tr v-if="item.isExpandedDetails">
            <td colspan="4" class="pa-4 bg-gray-50">
              <h4>项目详情</h4>
              <p>{{ item.description }}</p>
            </td>
          </tr>

          <!-- 第二组展开行：客户列表 -->
          <tr v-if="item.isExpandedCustomers">
            <td colspan="4" class="pa-4">
              <v-chip
                v-for="customerId in item.customers"
                :key="customerId"
                pill
                darken-3
                color="primary"
                outlined
                class="ma-1"
              >
                {{ customers[customerId].name }}
              </v-chip>
            </td>
          </tr>
        </template>
      </tbody>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: '触发器1', value: 'trigger1' },
        { text: '触发器2', value: 'trigger2' },
        { text: '项目名称', value: 'name' },
        { text: '状态', value: 'status' }
      ],
      items: [],
      customers: {
        1: { id: 1, name: '客户A' },
        2: { id: 2, name: '客户B' },
        3: { id: 3, name: '客户C' }
      }
    }
  },
  mounted() {
    // 模拟从接口获取数据并添加展开状态
    this.items = [
      {
        id: 1,
        name: '项目Alpha',
        status: '进行中',
        description: '这是Alpha项目的详细描述信息...',
        customers: [1, 2],
        isExpandedDetails: false,
        isExpandedCustomers: false
      },
      {
        id: 2,
        name: '项目Beta',
        status: '已完成',
        description: '这是Beta项目的详细描述信息...',
        customers: [3],
        isExpandedDetails: false,
        isExpandedCustomers: false
      }
    ]
  }
}
</script>

<style scoped>
.bg-gray-50 {
  background-color: #f5f5f5;
}
</style>

关键说明 #

• 独立状态管理：每个数据项的两个展开状态完全独立，不会互相干扰。
• 自定义Body模板：绕过Vuetify默认的展开行机制，直接控制表格DOM结构，实现灵活的多组展开。
• colspan匹配：展开行的colspan值要与表格的总列数一致，避免布局错位。

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