如何为bootstrap-vue的tbody-tr-class属性绑定十六进制颜色样式

问题原因 #

• 类名不匹配：rowClass 方法返回的类名为 table-hexvalue1、table-hexvalue2，但样式中定义的选择器是 .hexvalue1、.hexvalue2，前缀不一致导致样式无法匹配目标元素
• scoped 样式隔离限制：单文件组件的 scoped 样式默认仅作用于当前组件的根元素及直接子元素，b-table 作为子组件，其内部的 tr 元素无法被当前组件的 scoped 样式直接命中，需要使用深度选择器穿透隔离
• 文字颜色设置错误：当前代码中 color 属性值和 background-color 完全一致，即使样式生效，文字也会和背景同色无法正常显示

解决步骤 #

1. 修正样式选择器，保证和 rowClass 返回的类名完全一致
2. 给样式添加深度选择器，穿透 scoped 隔离限制
3. 调整文字颜色为和背景有对比度的有效值

修改后的样式代码 #

Vue 2 环境写法：

<style lang="scss" scoped>
::v-deep .table-hexvalue1 {
  background-color: #D9FFBC;
  color: #212529; /* 可替换为自定义文字色 */
}
::v-deep .table-hexvalue2 {
  background-color: #fd7e14;
  color: #fff; /* 可替换为自定义文字色 */
}
</style>

Vue 3 环境写法：

<style lang="scss" scoped>
:deep(.table-hexvalue1) {
  background-color: #D9FFBC;
  color: #212529;
}
:deep(.table-hexvalue2) {
  background-color: #fd7e14;
  color: #fff;
}
</style>

如果不想使用深度选择器，也可以单独创建一个不带 scoped 属性的 style 块存放这部分样式，注意不要和全局类名冲突即可。

内容的提问来源于stack exchange，提问作者azam