Question

我正在使用VuetifyJS Data Table，并且我需要将每个标头单元格的条目尽可能地靠近。我尝试为每个标头添加一个 width ，但这没有用-似乎有一个预定义的宽度不能低于该宽度。

更新：这是它的外观-每行之间的边距应固定为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

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

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' },
],

Answer 3

您可以使用CSS并覆盖它们的类。尝试修改td的{{1}}

您在这里有一支密码笔：https://codepen.io/anon/pen/gjxPMJ

我也将td的文本向左对齐：width

只需使用width值即可获得所需的值，也可以使用百分比。

Answer 4

只需在标题中添加 (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
}

更改VuetifyJS数据表单元格的默认宽度

4 个答案: