Vuetify 多行对齐并设置相同的宽度

Posted 2023-02-23

【中文标题】Vuetify 多行对齐并设置相同的宽度

【英文标题】：Vuetify multiple rows align and set the same width

【发布时间】：2020-06-04 12:09:51

【问题描述】：

如何在 Vuetify 中将多行与col="auto" 对齐？

我想让cols="auto" 多行之间的宽度相同。

<div id="problem_list" class="text-center">
  <v-row>
    <v-col cols="auto">
      ID
    </v-col>
    <v-divider vertical></v-divider>
    <v-col class="text-left">
      Title
    </v-col>
    <v-divider vertical></v-divider>
    <v-col cols="auto">
      Ratio
    </v-col>
  </v-row>
  <v-row>
    <v-col cols="auto">
      1
    </v-col>
    <v-divider vertical></v-divider>
    <v-col class="text-left">
      fdkj
    </v-col>
    <v-divider vertical></v-divider>
    <v-col cols="auto">
      8
    </v-col>
  </v-row>
</div>

【参考方案1】：

同意 BakaDesu 的回答。

如果您希望表格看起来对齐并且具有不同的列宽，您可以在 BakaDesu 代码中添加一些视口断点，这将使您的外观与您建议的图像相同，但列对齐。

我认为使用 Baka 建议的外部 CSS 比修改 vuetify base css 上的任何内容更好，当代码变得更复杂时很可能会回来。

带有视口断点的 BakaDesu 代码如下所示。

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid>
        <v-row>
    <v-col md="1" class="test">
      ID
    </v-col>
    <v-col md="10" class="test">
      Title
    </v-col>
    <v-col md="1" class="test">
      Ratio
    </v-col>
  </v-row>
  <v-row>
    <v-col md="1" class="test">
      1
    </v-col>
    <v-col md="10" class="text-left test">
      fdkj
    </v-col>
    <v-col md="1" class="test">
      8
    </v-col>
  </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>

另外，为什么不使用 vuetify 中的一个可用组件来解决这个问题，比如

Simple tables Data Tables Data Iterators

【参考方案2】：

移除 v-divider 和 cols="auto"。默认情况下，删除 cols 将使 col 自动。如果您想要分隔线，请改用 CSS。

模板：

<v-row>
    <v-col class="test">
        ID
    </v-col>
    <v-col class="test">
        Title
    </v-col>
    <v-col class="test">
        Ratio
    </v-col>
</v-row>
<v-row>
    <v-col class="test">
        1
    </v-col>
    <v-col class="text-left test">
        fdkj
    </v-col>
    <v-col class="test">
        8
    </v-col>
</v-row>

CSS：

.test 
   border-left: 1px solid lightgray;

Codepen

但是根据您要执行的操作来判断，使用 v-simple-table 或 v-data-table 不是更好吗？

【参考方案3】：

尝试覆盖一些 Vuetify CSS 规则，以便无论列数如何都具有相同的宽度：

.row
display: grid;
    grid-template-columns: repeat(auto-fit,minmax(64px,auto));

请检查此codepen 示例