How to get table column count when specifying custom bottom-row?

Patryk :

I have the following table

<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>

Is it possible to somehow get the column count and use it in the colspan instead of hardcoded 7? I presume I can use some convoluted logic with a custom prop to cover this but there's probably a better approach. I can also use e.g. 999999 which surprisingly works.

I've tried colspan='fields.length' but that wouldn't work.

Sølve Tornøe :

You were so close with your try

In order for vue to understand that you want to pass a variable as the attribute value, you need to add a colon in front of it, like so:

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

If you do it like this:

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

colspan would parse the fields.length as a string "fields.length", not the javascript computed value for the variable fields.length 7 for example.

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=404589&siteId=1