Vuetify 数据表添加带有图标/按钮的附加列标题

Question

我正在使用 Vuetify 创建自定义表格，我需要添加一个带有图标按钮的附加列，这将允许我切换显示标题（带标题的 3 点切换菜单）。

现在我正在遍历所有标题：

<template v-for="header in $attrs.headers" v-slot:[`header.${header.value}`]>
...
</template>

我尝试再添加一个带有标题的插槽，但它在主行下方创建了它。

<template v-slot:header>
  <v-btn>
  //icon
  </v-btn>
</template>

有没有办法只用一个按钮添加一个静态标题？

Answer 1

您不需要覆盖整个v-slot:header。

主要思想是：

1. 添加代理“操作”列
2. 将 active 属性注入到所有列中
3. 使用由 active 属性过滤的计算头而不是数据头

有点凌乱但有效的解决方案：

<v-data-table
  :headers="activeHeaders"
  :items="desserts"
  :items-per-page="5"
>
  <template #header.actions="props">
    <v-menu
      v-model="menu"
      :close-on-content-click="false"
      offset-y
      :transition="false"
    >
    <template #activator="{ on, attrs }">
      <v-btn icon v-bind="attrs" v-on="on">
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </template>

    <v-card>
      <v-list>
        <v-list-item v-for="item in headers" :key="item.value" v-if="item.value !== 'actions'">
          <v-list-item-action>
            <v-checkbox
              v-model="item.active"
            />
          </v-list-item-action>
          <v-list-item-content style="cursor: default">
            <v-list-item-title>{{ item.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </template>
</v-data-table>
...
data () {
  return {
    menu: false,
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'start',
        sortable: false,
        value: 'name',
        active: true,
      },
      { text: 'Calories', value: 'calories', active: true, },
      { text: 'Fat (g)', value: 'fat', active: true, },
      { text: 'Carbs (g)', value: 'carbs', active: true, },
      { text: 'Protein (g)', value: 'protein', active: true, },
      { text: 'Iron (%)', value: 'iron', active: true, },
      { text: '', value: 'actions', active: true, sortable: false, width: '20px', class: 'px-0'}
    ],
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%',
      },
      ...
    ]
  },
},
computed: {
  activeHeaders() {
    return this.headers.filter(header => header.active)
  }
}

你可以测试这个at CodePen。