如何更改beufy数据表中每行的背景颜色，并为每行指定颜色

Question

我是web技术的新手，遇到了这个问题：我希望能够动态更改行的颜色

我用自己的知识尝试了不同的方法，但都没有成功。我有一个json，其中包含表的信息，颜色代码在(ex: #D465F2)中。我无法找到一种方法来动态地在一次内为整行着色。我可以用预定的css来做，但这不是我需要的。

它唯一的工作方式是：

模板：

<template>
<div>
<p class="title">logs</p>
<b-table
:data="loginfo"
:sticky-header="stickyHeaders"
height="1200px"
:row-class="() => 'relative'"
>
<b-table-column v-slot="props" field="log_id" label="color">
<div class="colored-cell" :style="{ backgroundColor: props.row.color }">
<p>{{ props.row.color }}</p>
</div>
</b-table-column>
</b-table>
</div>
</template>

脚本：

<script>
import axios from 'axios'
export default {
props: {
id: Number,
state: Number,
},
data() {
return {
loginfo: [],
stickyHeaders: true,
dateSearchable: false,
}
},
watch: {
id(newId) {
this.newLog()
},
},
methods: {
async newLog() {
await axios
.get('http://127.0.0.2:5001/api/log?sequence=' + this.id)
.then((response) => (this.loginfo = response.data.data))
},
},
}

json发送到脚本的示例：

"data": [
{
"color": "#15986E", 
"log_id": 25, 
"logged_at": "2022-05-17 16:27:00.015", 
}, 

这是我的css：

.relative {
position: relative;
}
.colored-cell {
position: absolute;
top: 0;
left: 0;
padding: 8px 12px;
}

有了这段代码，我一个接一个地给每个单元格上色，但这会使表变得不可读，而且都坏了。一切都在彼此之上。TableBroken Screen

如果有人有解决方案可以让表再次看起来很棒/动态地为行着色或任何能帮助我的东西，那么另一个库可以让我动态地更改行颜色。

Answer 1

只需使用td-attrs道具作为文档

<b-table>
:data="loginfo"
:sticky-header="stickyHeaders"
height="1200px"
>
<b-table-column v-slot="props" field="log_id" label="color" :td-attrs="columnTdAttrs">     
{{ props.row.color }}
</b-table-column>
</b-table>
</div>

export default {
methods: {
columnTdAttrs(row, column) {
return {
style: {
backgroundColor: row.color
}
}
}
},
}