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

【问题标题】：Change the default width of a VuetifyJS DataTable cell更改 VuetifyJS DataTable 单元格的默认宽度
【发布时间】：2019-01-02 18:43:22
【问题描述】：

我正在使用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>

如何让它们靠得更近？

【问题讨论】：

width 不起作用是什么意思？它应该是字符串，例如width:"10%" 或 width:"10".

标签： javascript vue.js datatable vuetify.js

【解决方案1】：

您可以添加另一个空标题并将每列的width 设置为最小值（1％），除了空以使其填充所有可用空间。您还需要在表格正文模板中添加空的td 以使灰色行分隔符可见。

见codepen：https://codepen.io/anon/pen/WKXwOR

【讨论】：

谢谢，但每列之间的空间仍然相同。我需要柱子靠得更近。该怎么做？
在我的示例表中尝试填充尽可能少的空间，如果您希望列更接近，那么只有一种方法可以减少 th 和 td 元素的填充（@987654326 @ 和 table.v-table thead th 选择器）。我更新了答案codepen

【解决方案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' },
],

【讨论】：

这是直截了当的答案
我认为在使用 header slot 时，这可能不起作用。
喜欢这个答案

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以使用 CSS，覆盖它们的类。尝试修改td的width

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

我还为 td 将文本向左对齐：<td class="text-xs-left">

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

【讨论】：

OP 希望标题彼此接近 afaiu（所以应该改变宽度）？
@Traxo你是对的，我误解了这个问题，但是是的，他可以玩td的宽度
@V.Sambor 我尝试了您的 CodePen 并使用了不同的值，但问题仍然存在。这是我更新的示例：codepen.io/anon/pen/ajyjLZ