更改VuetifyJS DataTable单元格的默认宽度

Question

我正在使用VuetifyJS数据表,我需要将每个标题单元格的条目尽可能地彼此移动.我试图为每个标题添加一个宽度,但这不起作用 - 似乎有一个预定义的宽度,不能低于此.

更新:它应该是这样的 - 每行之间的边距应固定为10px:

这是一个CodePen示例:

https://codepen.io/anon/pen/ejEpKZ?&editors=101

 <div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template slot="headerCell" slot-scope="props">
        <v-tooltip bottom>
          <span slot="activator">
            {{ props.header.text }}
          </span>
          <span>
            {{ props.header.text }}
          </span>
        </v-tooltip>
      </template>
      <template slot="items" slot-scope="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-app>
</div>

如何让他们靠近在一起？

Answer 1

您可以添加另一个空标题和width每列的集合到最小值(1%),除了空以使其填充所有可用空间.此外,您还需要向td表体模板添加空,以使灰色分隔线可见.

请参阅codepen:https://codepen.io/anon/pen/WKXwOR

Answer 2

只需在标题中添加 (width,align)

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

标题看起来像

 header:[ {
        text: 'Dessert ',
          align: 'center',<------------to align left/center/right/
          value: 'name',
          width: "1%"//<-------------------asign width/
        },
   ]

Vuetify 标头选项：

{
  text: string
  value: string
  align: 'left' | 'center' | 'right'
  sortable: boolean
  class: string[] | string
  width: string
}

Answer 3

您可以使用标题设置宽度，如下所示

headers: [
  { text: 'Dessert (100g serving)', value: 'name', width: '20%'},
  { text: 'Calories', value: 'calories', width: '50%' },
  { text: 'Fat (g)', value: 'fat' },
  { text: 'Carbs (g)', value: 'carbs', width: '200px' },
],