从后端接口拿过来的多个值，根据值得不同，定义不同的字体颜色或者背景颜色。即定义不同样式；

本文链接：https://blog.youkuaiyun.com/weixin_56898375/article/details/124706724

这篇博客展示了如何在 Vue.js 应用中使用动态样式和数据绑定来改变表格单元格的颜色和背景。通过在 Vue 的 `<template>` 和 `<script>` 部分定义 `activation` 计算属性，根据接口返回的数据内容动态设定颜色和背景色。例如，针对不同的处理状态赋予不同颜色，以及根据数据项的内容设置背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果；在看对你有用没

从后端接口拿过来的值得不同，每个定义不同颜色，以下代码

 以下是vue的<template></template>里//
 <el-table v-loading="loading" :data="memberDeclareList" @selection-change="handleSelectionChange" :cell-style="columnStyle">
<!-- 处理状态 -->
      <el-table-column label="处理状态" align="center" prop="handleType">
        <template slot-scope="scope">
          <span :style="activation(scope.row.handleType)">{{scope.row.handleType == '0'?'待处理':scope.row.handleType == '1'?'已收录':scope.row.handleType == '2'?'原已收录':'已忽略'}}</span>
          <!-- <div :class="scope.row.state == 1 ? 'text-red':''">{{scope.row.state === 1 ?'待跟进':'已跟进'}}</div> -->
        </template>
      </el-table-column>
</el-table>

  以下是 vue的<script><script>里//
 computed: { 
 activation() {              
                return (icontent) => { // 使用JavaScript闭包，进行传值操作
                    // console.log(icontent)
                 
                if (icontent == "0"){
                        return {'color':'#C30611'}
                    } 
                    else if (icontent =="1"){
                        return {'color':'#26A60C'}
                    } else if (icontent == "2"){
                        return {'color':'#FFB717'}
                    } else if (icontent == "3"){
                        return {'color':'#A4A8A4'}
                    }
                    
                }
                },

以下这个是设置背景的写这个的时候我从上面的我发现data里可以不定义也有效果

然后下面是我第一次实现的全部代码《是第二个红色框的定义代码》

以下是vue的<template></template>里//
 <div>
          <span  v-for="item in getDataTags" :key="item"  :style="activation(item)" class="btcolor">{{
            item ? item : "无称号"
          }}</span>
</div>

  data() {
    return {
    
      tss: [
                    {'title': 'jj','content': '称号认定'},
                    {'title': 'jon','content': '资金扶持'},
                    {'title': 'jay','content': '金融扶持'},
                    {'title': 'james','content': '股权投资'},
                    {'title': 'jameslate','content': '减税降费'}
            ],
    
    };
  },

  computed: {  activation() {              
                return (icontent) => { // 使用JavaScript闭包，进行传值操作
                    // console.log(icontent)
                    if (icontent === "资金扶持"){
                        return {'background':'#fb9435'}
                    }  
                   else if (icontent === " 称号认定"){
                        return {'background':'#2EBC66'}
                    } 
                   
                    else if (icontent === " 金融扶持"){
                        return {'background':'#6CC2ED'}
                    } else if (icontent === "股权投资"){
                        return {'background':'#1F88F9'}
                    } else if (icontent === "减税降费"){
                        return {'background':'#BF382F'}
                    }else if (icontent === "金融扶持"){
                        return {'background':'#6CC2ED'}
                    }else if (icontent === "称号认定"){
                        return {'background':'#2EBC66'}
                    }else if (icontent === " 资金扶持"){
                        return {'background':'#fb9435'}
                    }
                    
                }
                },