指定自定义底行时如何获取表格列数？答案

【问题标题】：How to get table column count when specifying custom bottom-row?指定自定义底行时如何获取表格列数？
【发布时间】：2020-04-04 15:58:08
【问题描述】：

我有下表

<b-table
    ref='table'
    :fields='fields'
    :items='provider'
    :busy.sync='isBusy'
>
    <template v-slot:bottom-row>
        <!-- TODO: Is it possible to not hardcode it? -->
        <b-td colspan='7' class='text-center'>
            <b-spinner></b-spinner>
        </b-td>
    </template>
</b-table>

是否有可能以某种方式获取列数并在colspan 中使用它而不是硬编码7？我想我可以使用一些带有自定义道具的复杂逻辑来解决这个问题，但可能有更好的方法。我也可以使用例如999999 出人意料地有效。

我已经尝试过colspan='fields.length'，但这不起作用。

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

你的尝试如此接近

为了让vue明白要传递一个变量作为属性值，需要在前面加一个冒号，像这样：

 <b-td :colspan='fields.length' class='text-center'>

如果你这样做：

 <b-td colspan='fields.length' class='text-center'>

colspan 会将fields.length 解析为字符串“fields.length”，而不是变量fields.length 7 的javascript 计算值。

【讨论】：