Framework7 + Vue：尝试动态对齐列;调整不起作用

Question

在F7Vue中，如果未设置：width属性，则列应自动间隔。

我有一组用Vue循环生成的列。相对于itset，每列的间距看起来都很好。但是相对于彼此而言，我的行看起来很乱，因为某些行的列需要很大的空间。

            <f7-card-content >
            <f7-list style="background: white; color: black">
                <f7-list-item v-for="result in orderedSubcategory" @click="openKKS(result.kks)" class="popup-trigger">
                    <f7-col>{{ getNumber(result.kks) }}</f7-col>
                    <f7-col>{{ result.hersteller }}</f7-col>                                    
                    <f7-col>{{ result.typ }}</f7-col>
                    <f7-col>{{ result.artikelNummer }}</f7-col>
                </f7-list-item>
            </f7-list>
            </f7-card-content>

为了解决这个问题，我编写了一个计算函数来获取每一行的最大宽度，因此理论上这些列都应该从相同的点开始。然而，当我运行它时，列看起来完全相同 - 自动间距。

            <f7-card-content >
            <f7-list style="background: white; color: black">
                <f7-list-item v-for="result in orderedSubcategory" @click="openKKS(result.kks)" class="popup-trigger">
                    <f7-col :width="getKksWidth">{{ getNumber(result.kks) }}</f7-col>
                    <f7-col :width="getHerstellerWidth">{{ result.hersteller }}</f7-col>                                    
                    <f7-col :width="getTypWidth">{{ result.typ }}</f7-col>
                    <f7-col :width="getArtikelWidth">{{ result.artikelNummer }}</f7-col>
                </f7-list-item>
            </f7-list>
            </f7-card-content>

这是结果，之前和之后：

因此，即使我设置了计算宽度，间距也不会改变。奇怪的是，元素检查器显示正在设置宽度：

每个list-item元素的列宽度相同。为什么在我的结果中，每列不在水平轴的同一点开始？

根据Oluwafemi Sule的建议，这是我硬编码宽度时的结果（它们是相同的 - 它们是自动设置的）