javascript - Vue.js:表格标题宽度取决于数据单元格

Question

我希望标题项自动具有与下表中的属性相同的宽度。

我尝试用 Flex 做一些技巧，但没有任何效果。另一种解决方案是为每个标题使用百分比宽度，但我知道这是错误的方法。

<template>
    <div class="product-list">
        <div class="product-list__header">
            <div class="heading" v-for="heading in headings" :key="heading.id">
                <p>{{ heading.text }}</p>
            </div>
        </div>
        <div class="product-list__content">
            <div class="row" v-for="prod in products" :key="prod.id">
                <div class="table-data" v-for="(value, key) in prod" :key="key">
                    <p>{{ value }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

我希望结果看起来像这样: Result

Answer 1

您可以通过 Bootstrap 为 show table 做到这一点,你只需要 add script在索引中，您可以在 Bootstrap 中使用，