Bootstrap Vue b-table如何设置指定列单元格的文本颜色

问题场景 #

在b-table组件开发中，需要为指定列设置自定义文本颜色，仅修改文字颜色、不改动单元格背景。现有配置中thStyle属性仅能控制列头文本颜色，无法作用于列下的数据单元格。
现有模板代码：

<b-card title="Total">
  <b-table sticky-header="600px" hover :items="total" :fields="groupByFields"></b-table>
</b-card>

现有列配置代码：

groupByFields: [
    {
      key: 'name',
      sortable: true,
    },
    {
      label: 'Total',
      key: 'count',
    },
    {
      key: 'interested',
      thStyle: { color: '#3eef33' },
      sortByFormatted: false,
      formatter: (value) => {
        const res = value;
        return (`($${res})`);
      },
    },
  ],

实现方法 #

b-table的fields配置中，thStyle是专门给表头<th>标签绑定内联样式的属性，对应数据单元格<td>的内联样式绑定属性为tdStyle，直接在目标列配置中添加和thStyle一致的颜色配置即可，不会影响单元格背景色。
修改后的interested列配置：

{
  key: 'interested',
  thStyle: { color: '#3eef33' },
  // 新增tdStyle配置，给该列所有数据单元格设置相同文字颜色
  tdStyle: { color: '#3eef33' },
  sortByFormatted: false,
  formatter: (value) => {
    const res = value;
    return (`($${res})`);
  },
}

其他相关配置说明：

• 如果需要通过CSS类控制单元格样式，可使用tdClass属性绑定类名，用法和表头的thClass完全一致，支持传字符串、类名数组、返回类名的函数
• 如果需要给单个特殊单元格单独设置样式，可在tdStyle/tdClass中传入函数，根据当前行的value、item数据动态返回样式或类名

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