[vue]根据表格内容显示不同的字体颜色

1、对于工单表格的工单处理状态列，若某条工单的处理状态为“区职能局退件”，则“区职能局退件”字体颜色为红色。

2、我尝试在created(){}种使用getElementsByTagName("font")，然后判断一下，如果innerText是“区职能局退件”，则将color设置为红色。但是获取不到元素。

3、想请问一下有没有人遇到类似的需求呀？解决思路是什么~

    <span :style="{color:scope.row.wordStatus=='区职能局退件' ? 'red':''}">{{scope.row.wordStatus}}</span>

这样写就行了

内联样式，根据内容设置下颜色

【以下回答由 GPT 生成】

问题解答

在Vue中根据表格内容显示不同的字体颜色，可以通过条件渲染和绑定内联样式来实现。以下是一种解决方案：

首先，假设你的工单数据是一个数组，每个工单对象都有一个处理状态属性(例如status)。你可以在模板中循环遍历工单数组，并根据状态值设置字体颜色：

<template>
  <table>
    <tr v-for="order in orders" :key="order.id">
      <td :style="{ color: getStatusColor(order.status) }">{{ order.status }}</td>
      <!-- 其他列 -->
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        { id: 1, status: '进行中' },
        { id: 2, status: '已完成' },
        { id: 3, status: '区职能局退件' },
        // 其他工单对象
      ]
    };
  },
  methods: {
    getStatusColor(status) {
      return status === '区职能局退件' ? 'red' : ''; // 根据状态返回对应的颜色
    }
  }
};
</script>

在上述代码中，我们使用v-for指令循环遍历工单数组，并使用:key绑定每个工单对象的唯一ID，保证数据的可持续性。然后，我们使用内联样式:style绑定了一个方法getStatusColor，该方法根据工单的处理状态返回对应的颜色。如果状态为"区职能局退件"，则返回红色，否则返回空字符串。

这样，当渲染工单表格时，Vue会根据每行工单的状态值动态应用对应的样式，从而实现根据表格内容显示不同的字体颜色的效果。

希望以上解决方案能对你有所帮助！