Vue DataTable左侧动态图标不显示及展开按钮消失问题求助

一、解决左侧图标不显示问题 #

你当前把图标放在了expanded-row（展开后的行）插槽中，这是错误的逻辑——图标应该属于主数据行，而非展开行。按以下步骤修正：

1. 添加图标列定义
   在你的表格列配置数组中，新增一个左侧图标列：

const columns = [
  { key: 'icon', label: '', width: '50px' }, // 无表头、固定宽度的图标列
  { key: 'title', label: 'Title' },
  { key: 'type', label: 'Type' },
  { key: 'source', label: 'Source' },
  { key: 'location', label: 'Location' },
]

2. 主行插槽渲染动态图标
   在模板中针对item.icon插槽编写图标渲染逻辑，根据内容类型切换图标：

<v-data-table
  :items="yourManifestData"
  :columns="columns"
  show-expand
>
  <!-- 主数据行的左侧图标插槽 -->
  <template v-slot:item.icon="{ item }">
    <v-icon :icon="getFileIcon(item.type)"></v-icon>
  </template>

  <!-- 修正展开行的colspan计算 -->
  <template v-slot:expanded-row="{ columns, item }">
    <tr>
      <td></td> <!-- 对应左侧图标列，留空 -->
      <td class="expandable-data" :colspan="columns.length - 1">
        <div class="expandable-data">
          <!-- 你的展开内容 -->
          详情：{{ item.title }} - {{ item.type }}
        </div>
      </td>
    </tr>
  </template>
</v-data-table>

3. 添加图标类型判断方法
   在组件的methods中实现类型到图标的映射：

methods: {
  getFileIcon(type) {
    const upperType = type?.toUpperCase();
    switch(upperType) {
      case 'PDF':
        return 'mdi-file-pdf-box';
      case 'WORD':
        return 'mdi-file-word-box';
      default:
        return 'mdi-file-outline';
    }
  }
}

二、解决图标移至右侧时展开按钮消失问题 #

Vuetify的show-expand会自动在表格最后一列生成展开按钮，若自定义最后一列插槽会覆盖默认按钮，可通过两种方式解决：

方法1：调整列顺序（推荐） #

将图标列放在展开按钮列之前（即列定义的倒数第二位），展开按钮会自动保留在最后：

const columns = [
  { key: 'title', label: 'Title' },
  { key: 'type', label: 'Type' },
  { key: 'source', label: 'Source' },
  { key: 'location', label: 'Location' },
  { key: 'icon', label: '', width: '50px' }, // 图标列放倒数第二
]

模板中依然用item.icon插槽渲染图标，展开按钮不会被覆盖。

方法2：自定义最后一列包含图标与展开按钮 #

若必须将图标与展开按钮放在同一列，可手动渲染展开按钮：

<v-data-table
  :items="yourManifestData"
  :columns="columns"
  show-expand
>
  <!-- 自定义最后一列，同时显示图标和展开按钮 -->
  <template v-slot:item.lastColumn="{ item, expand }">
    <v-icon :icon="getFileIcon(item.type)" class="mr-2"></v-icon>
    <v-btn icon @click="expand(!item._expanded)">
      <v-icon>{{ item._expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
    </v-btn>
  </template>

  <template v-slot:expanded-row="{ columns, item }">
    <tr>
      <td class="expandable-data" :colspan="columns.length">
        <div class="expandable-data">
          <!-- 你的展开内容 -->
        </div>
      </td>
    </tr>
  </template>
</v-data-table>

注意列定义的最后一列key需设为lastColumn，与插槽对应。

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