4👍
✅
Using the
I can think of two possibilities on how you could achieve this:
- Using the
footer
slot. - Using a computed property to append an extra item to your
items
array which will represent your custom row.
Using the footer
slot
You can check Buefy’s documentation for the table component in the “Footer” section (I’m unable to link it directly).
<template slot="footer">
<!-- Your custom last row goes here -->
</template>
Computed array with extra item
Add a computed property inside your component which returns the items
array and appends an extra item.
computed: {
itemsWithTotal() {
return [
...this.items,
{ /* data for your last row */ }
];
}
}
Remember to change the items
prop of b-table
to the new computed property. You will also have to differentiate between regular items and your custom last row item inside the column templates.
I’d recommend using the footer
slot as you can avoid mixing your items array with a custom extra item.
👤Marc
Source:stackexchange.com