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

Posted 2023-02-16

【中文标题】更改 VuetifyJS DataTable 单元格的默认宽度

【英文标题】：Change the default width of a VuetifyJS DataTable cell

【发布时间】：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".

【参考方案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