Javascript 引导Vue更改b表中每个单元格的背景
我正在使用引导vue b-table显示我的项目:Javascript 引导Vue更改b表中每个单元格的背景,javascript,css,vue.js,bootstrap-vue,Javascript,Css,Vue.js,Bootstrap Vue,我正在使用引导vue b-table显示我的项目: <b-table striped bordered :tbody-tr-class="row_class" :fields="fields" :items="items" head-variant="light" class="o-list" thead-class="o-gradient-header"
<b-table striped bordered :tbody-tr-class="row_class" :fields="fields" :items="items" head-variant="light" class="o-list"
thead-class="o-gradient-header"
@row-selected="onRowSelected" selectable
no-local-sorting @sort-changed="change_sort" :sort-by="list_options.sort"
:sort-desc="list_options.order==='desc'">
...
</b-table>
但这会改变整行的样式。我不想那样。我只想改变牢房的样式?有什么方法可以更改每个单元格的背景颜色吗?您可以使用
tbody tr class
prop设置每一行的样式
<b-table striped hover caption-top
:items="items"
:fields="fields"
:tbody-tr-class="rowClass"
>
</b-table>
您可以使用
tbody tr class
prop设置每一行的样式
<b-table striped hover caption-top
:items="items"
:fields="fields"
:tbody-tr-class="rowClass"
>
</b-table>
new Vue({
el: "#app",
data() {
return {
fields: [
{
key: "name",
label: "Name",
sortable: true
},
{
key: "email",
label: "Email",
sortable: true
},
{
key: "age",
label: "Old",
sortable: true
}
],
items: [
{ age: 40, name: "admin1", email: "hoge@for.jp" },
{ age: 21, name: "admin2", email: "huga@for.jp" },
{ age: 89, name: "admin3", email: "piyo@for.jp" },
{ age: 38, name: "admin4", email: "aaaaa@for.jp" }
]
};
},
methods: {
rowClass(item, type) {
if (!item || type !== 'row') return
if (item.age > 30) return 'table-success'
}
}
});