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

2023-10-30

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

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

 以下是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'}
                    }
                    
                }
                },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从后端接口拿过来的多个值,根据值得不同,定义不同的字体颜色或者背景颜色。 即定义不同样式; 的相关文章

  • 在占位符中添加 HTML

    我喜欢使用 HTML 占位符 因为它有助于向用户描述他们需要输入的内容类型 但是 有时您需要为用户提供更多信息 而不仅仅是简单的句子 基本上我希望能够在我的文本区域占位符中添加换行符 制表符等 我听说过使用特殊编码来做到这一点 并且已经使用
  • 在长时间 Ajax 调用期间显示进度

    我有一个简单的网站 http www kousenit com twitterfollowervalue http www kousenit com twitterfollowervalue 根据一个人的 Twitter 关注者计算数量 由
  • 在 HTML TextArea 中设置(或读取)光标/插入符的值

    我正在尝试 但失败了 在 HTML 文本区域中实现拖放机制 使用 jQuery 或 Scriptaculous 我们都使用 拖放机制相对容易 因此我愿意接受使用这两者之一的答案 问题是 我似乎找不到读取或设置插入点的方法 我最终想要做的是确
  • 在原子操作中测试和递减?

    我刚刚发现了一个恼人的错误 它基本上是一个竞争条件 为了便于论证 我们假设一个非常简单的文档结构 例如 id XXX amount 100 集合中存在数百个这样的文档 并且由多个编写器访问 这些编写器有效地尝试将数量降低任何值 但绝不会低于
  • 使用 jQuery 的 .trigger('dragstart') 实现 HTML5 的拖放功能时如何 .setData/.getData

    当使用 jQuery 的 trigger dragstart 在具有 ondragstart drag event 属性的元素上触发函数时 如何使用 setData getData 实现 HTML5 在触摸设备上的拖放 流程示例 用户通过
  • 使用过渡添加子项时 div 的平滑增长

    尽管使用了以下代码 但其行为并不符合我的预期transition所以可能有些事情我不明白 理想情况下 单击该按钮会将一个子项添加到id2div 并制作id1分区增长smoothly因此 function id1 button click g
  • 如何使用 WebStorm 在 TypeScript 而不是 JavaScript 中创建 Cucumber 步骤定义文件?

    I m building a new e2e test suite using Cucumber js and I d like to use TypeScript for my step files When I create a new
  • Collada 模型面在 Three.js 中无法正确显示

    将 collada 模型导入到 Three js 后 模型的某些面只能从模型内部看到 从外部看不到 如何解决相关面孔的问题 是否可以让模特的脸部从两侧都可见 它无法正常工作的原因是您的文件设置了此双面标志
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • Protractor - 等待多个元素

    我正在尝试等待页面上的多个元素 我不知道可能有多少个 但至少会有一个 我知道使用以下命令等待单个元素 效果很好 var EC protractor ExpectedConditions browser wait EC presenceOf
  • Apache 服务器上的服务器端 Javascript

    我们打算使用Apache https httpd apache org 用于 Web 开发的服务器 对于服务器端脚本 我们希望使用服务器端 javascript 要使服务器端 javascript 在 Apache 服务器上工作需要什么 S
  • jQuery 或 JavaScript 中的“$”符号是什么意思? [复制]

    这个问题在这里已经有答案了 可能的重复 JavaScript 中 符号的含义是什么 https stackoverflow com questions 1150381 what is the meaning of sign in javas
  • 适用于 HTML5 混合应用程序的 CORS

    我读过很多关于 CORS 的文章 以及允许 Access Control Allow Origin 如何成为 Web 服务器的安全漏洞 但没有一篇文章解释了如何允许 HTML5 混合应用程序访问某些不允许使用通配符 的域上托管的 Web 服
  • 如何使网站适应用户的屏幕分辨率?

    我正在使用 1024x768 屏幕分辨率来设计我的网站 当您从屏幕分辨率较小 较大的计算机上的浏览器中查看网站时 网站开始变形 无论用户的屏幕分辨率是什么 如何使网站适应用户的屏幕分辨率 我相信通过 JavaScript 或 CSS 是可能
  • iOS 11 getUserMedia 不起作用?

    苹果公司发表声明称getUserMedia将在 iOS 11 上完全正常运行 安装 iOS 11 Beta 版本 5 后 我确实收到一条消息 表明我的网站请求访问我的相机和麦克风 但似乎是这样的 video src window URL c
  • JavaScript 点击事件在 Android 4.0.4 默认浏览器上的 Samsung Galaxy SIII 上不起作用

    我在 Android 4 0 4 上使用 Samsung Galaxy SIII 的默认浏览器时遇到了最奇怪的问题 对于以下页面 单击链接将不会触发 JavaScript 处理程序 从其中一个 div 的内容中删除单个 a 字母使它们再次工
  • IE7 问题 - 当禁用文件下载自动提示时无法下载流式文件

    我的应用程序是基于 J2EE JSP Servlet 的 当我尝试从 JSP 打开新窗口 弹出窗口 并调用 Servlet 操作 例如 Streamer do 以在该弹出窗口内传输 PDF 文件时 我遇到了问题 问题 当 IE 7 gt 工
  • Chrome 上的 contenteditable 中未显示编辑光标

    当您打开此页面时 请参阅现场演示 http jsfiddle net gs3p1a6r 3 show 与 Chrome span span CSS myspan border 0 outline 0 JS myspan focus the
  • 从另一台服务器读取 Node.js 中的大文件

    我有两台相互通信的服务器 Server1 向 Server2 请求文件的部分内容 并将收到的数据存储到一个文件中 Server2 应该接收每个请求并创建一个流管道传输数据 假设服务器2中存储的文件 目录 如下 bigfile gz bigf
  • AngularJS 应用程序:如何将 .js 文件包含到 index.html 中

    我是 angularJS 的新手 我设法使用 AngularJS 构建了一个phonegap应用程序 该应用程序正常并且运行良好 问题是 现在我对 angularJS 的工作原理有了更多的了解 至少我认为我已经了解了 我担心我的应用程序文件

随机推荐