Question

我正在尝试将vuetify v1.5 v-data-table组件的标题放在数据表组件本身之外。有谁知道如何实现这一目标？以下内容不起作用：

 <template>

    <div>  
     <template slot="headers" slot-scope="props"> 
      <th
        v-for="header in props.headers"
        :key="header.text"
        :class="['table-header']">
           {{ header.text }}
      </th>          
     </template>
    </div>

    //some other unrelated code

  <v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  >
  <template v-slot:items="props">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
   </v-data-table>

 </template>

Answer 1

我不知道我是否理解正确，如果我的宽恕不是你的意思，请在评论中告诉我。

命题：使用所有标头和数据创建一个v-data-table。在其上方的另一个v-data-table仅带有标题。

查看其在codepen - v-data-tables中的工作方式

// v-data-table - with items
<v-data-table
  :headers="headers"
   :items="desserts"
   class="elevation-1"
>
  <template v-slot:items="props">
    <td>{{ props.item.name }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
    <td class="text-xs-right">{{ props.item.carbs }}</td>
    <td class="text-xs-right">{{ props.item.protein }}</td>
    <td class="text-xs-right">{{ props.item.iron }}</td>
  </template>
</v-data-table>

// v-data-table - just headers
<v-data-table
 :headers="headers"
 :items="desserts"
 class="elevation-1"
 hide-actions
></v-data-table>

data() {
  return {
    headers: [
      {
        text: 'Dessert (100g serving)',
        align: 'left',
        sortable: false,
        value: 'name'
      },
      { text: 'Calories', value: 'calories' },
      { text: 'Fat (g)', value: 'fat' },
      { text: 'Carbs (g)', value: 'carbs' },
      { text: 'Protein (g)', value: 'protein' },
      { text: 'Iron (%)', value: 'iron' }
    ],
    desserts: [
      {
        name: 'Frozen Yogurt',
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
        iron: '1%'
      },
      {
        name: 'Ice cream sandwich',
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        iron: '1%'
      },
    ],
  },
}

在其组件外部放置一个vuetify插槽

1 个答案: