Unfortunately, it's not possible to apply styles or classes directly to a <template>.
There are several workarounds available for this situation.
Firstly, you can utilize the fields property on b-table. By using the utility class p-0, you can remove default padding in a column. Add this class to the tdClass property within your field object. You can then wrap your b-checkbox within a div and reapply the desired padding to this element.
This method allows you to style the checkbox wrapper div as if it were the cell itself.
Another option is to use the tdClass property in the fields object to apply classes along with your styles. The advantage of tdClass is that you can bind a method to it, passing information about the cell's value. This means you can dynamically change applied classes based on the content of the cell.
The final option involves using b-table-simple and manually crafting the markup. While this approach provides full control over the table layout, it requires reimplementing the functionality of b-table from scratch.
Below is an example snippet demonstrating implementation of options 1 and 2:
new Vue({
el: '#app',
data() {
return {
fields: [
'age',
'first_name',
'last_name',
{
key: 'active',
tdClass: 'p-0'
},
{
key: 'active2',
tdClass: this.applyTdClass
}
],
items: [{
age: 40,
first_name: 'Dickerson',
last_name: 'Macdonald',
active: false,
active2: false
},
{
age: 21,
first_name: 'Larsen',
last_name: 'Shaw',
active: false,
active2: false
},
{
age: 89,
first_name: 'Geneva',
last_name: 'Wilson',
active: true,
active2: true
},
{
age: 38,
first_name: 'Jami',
last_name: 'Carney',
active: false,
active2: false
}
]
}
},
methods: {
applyTdClass(value, key, item) {
const classes = [];
classes.push('border');
/* Example of dynamically changing classes */
if (value) {
classes.push('bg-success');
} else {
classes.push('bg-danger');
}
return classes;
}
}
})
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89a97">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50323f24109726253510627e61765c66675060605f9c7d65617c62">[email protected]</a>/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcfc2dedcccd8dcdbc882cdcfdcedcbd296dad7d7daad80cfc8ccd186fbe92916bbe86">[email protected]</a>/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table :items="items" :fields="fields">
<template v-slot:cell(active)="{ item }">
<div style="padding: 0.75rem" class="border-left border-primary">
<b-checkbox v-model="item.active"></b-checkbox>
</div>
</template>
<template v-slot:cell(active2)="{ item }">
<b-checkbox v-model="item.active2"></b-checkbox>
</template>
</b-table>
</div>