如何让Vuetify的v-col高度自适应匹配父级v-row的高度

解决方案 #

Vuetify的v-row默认基于flex布局实现，你遇到的问题核心是所有列都添加了align-self="center"属性，该属性会强制flex子项高度收缩到自身内容高度，不会自动拉伸适配父容器高度。
按如下修改即可实现需求：

1. 移除最后一列的align-self="center"属性，flex布局下子项默认的align-self: stretch会自动让列填充整行高度
2. 如果需要最后一列内部的内容保持垂直居中，给该列追加d-flex align-center类即可

修改后的代码示例：

<v-row justify="center">
    <v-col cols="4" class="pb-0 pt-0 pl-3" align-self="center">
        <v-img src="..." />
    </v-col>
    <v-col cols="6" class="pb-0 pr-6 pt-0" align-self="center">
        <v-row>
            <p>New Product</p>
        </v-row>
        <v-row>
            <small>Product Name</small>
        </v-row>
    </v-col>
    <v-col cols="2" class="d-flex align-center">
        <p>B001</p>
    </v-col>
</v-row>

后续如果需要给最后一列加背景色、边框等样式，直接添加在列的class上即可，此时列已经完全适配了整行的自适应高度。

内容的提问来源于stack exchange，提问作者starsky135