vxe-grid 单元格字体颜色

### 设置 Vxe-Grid 单元格字体颜色

为了设置 `vxe-grid` 中单元格的字体颜色，可以利用表格组件提供的自定义渲染功能。通过编写特定列的槽函数(slot-scope)，可以在满足条件的情况下动态改变文字的颜色。

对于 Vue 组件中的 `vxe-grid` 来说，可以通过 `formatter` 或者 `slots.default` 属性来控制每一行或每一个单元格的内容展示方式以及样式[^2]。下面是一个简单的例子，展示了如何基于某些逻辑更改指定列内文本的颜色：

<template>
  <div>
    <!-- 使用插槽作用域来自定义单元格内容 -->
    <vxe-table :data="tableData">
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="value" title="Value">
        <template #default="{ row }">
          <span :style="getCellStyle(row.value)"> {{ row.value }} </span>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = [
  { name: 'Item A', value: 10 },
  { name: 'Item B', value: 20 }
]

// 定义获取样式的函数
function getCellStyle(value: number): string {
  return value > 15 ? 'color:red;' : 'color:green;'
}
</script>

在这个例子中，当数值大于 15 的时候会显示红色字体；反之，则显示绿色字体。当然也可以根据实际需求调整这个判断标准或是引入更多的样式属性来进行更复杂的定制化操作。

如果希望针对整个表格应用统一风格而不仅仅是单个字段的话，还可以考虑使用 CSS 类的方式来做全局性的设定。比如创建一个新的类 `.custom-cell-style` 并将其应用于 `<vxe-table>` 标签上，从而影响所有子元素的表现形式。