I am making use of the bootstrap-vue table row select support feature and I would like to change the color of the selected-variant prop of the b-table. Currently, the color is set to info for the selected row in the table. I wish to customize it and set the color to #91c27d.
Here is the code snippet and a screenshot for reference.
Here is the HTML code for the table:
<b-table
sticky-header="450px"
striped
hover
:items="items"
:fields="fields"
ref="selectableTable"
selectable
:select-mode="selectMode"
selected-variant="info"
@row-selected="onRowSelected">
</b-table>
Here is the full script:
import axios from 'axios';
export default {
name: "Canvassing",
data() {
return {
fields: [
{ key: 'userId', label: 'User ID', thStyle: {background: '#0074a5', color: '#ffffff'} },
{ key: 'id', label: 'ID', thStyle: {background: '#0074a5', color: '#ffffff'} },
{ key: 'title', label: 'Title', thStyle: {background: '#0074a5', color: '#ffffff'} },
{ key: 'completed', label: 'Completed', thStyle: {background: '#0074a5', color: '#ffffff'} }
],
items: []
}
},
created() {
axios
.get('https://jsonplaceholder.typicode.com/todos')
.then(res => this.items = res.data)
.catch(e => {
this.errors.push(e)
});
},
methods: {
onRowSelected(items) {
this.selected = items
}
}
}
Below is the screenshot of the output: https://i.sstatic.net/XyTrj.png