5.0 vue下视图列根据字段值改变颜色

【myApps/OBPM版本号】：v5.0- sp XX
【浏览器类型】：Chrome/其他
【联系方式-QQ】：请留下您的QQ号码
【联系电话】:    请留下您的联系电话，以便技术同事更好解决您的问题
【问题描述】：vue下，视图根据字段值，改变颜色。
用这个写，没有成功
先在样式库写好样式
.listDataTr-bg1{
        background: #7fe07f!important;
}

.listDataTr-bg2{
        background: #dc4a45!important;
}


然后到视图创建列，使用脚本的方式，脚本如下：

(function(){
        var doc = getCurrentDocument();
        var val = doc.getItemValueAsString("状态");
        var jq = "";
        if(val.equals("开始")){
                jq += "<span class='bg1'></span>";
                jq += "<script>";
                jq += "jQuery(document).ready(function(){";
                jq += "jQuery('.bg1').parents('.obpm-listdatatr').addClass('listDataTr-bg1');";
                jq += "});";
                jq += "</script>";
        }else if(val.equals("结束")){
                jq += "<span class='bg2'></span>";
                jq += "<script>";
                jq += "jQuery(document).ready(function(){";
                jq += "jQuery('.bg2').parents('.obpm-listdatatr').addClass('listDataTr-bg2');";
                jq += "});";
                jq += "</script>";
        }
        return jq;
})();









1、问题描述最好图文并茂，如有视频/脚本可直接放出，这样技术同事在处理该问题时效率更加高效哦~
2、如果该问题已得到解决，请在该帖子下回复\"已解决可结帖\"

您好，vue这边不支持jq，您可以通过写原生js来操作

有例子吗？就像实现根据字段值改变视图列颜色。谢谢

您好，可以参考下以下代码，另外可以留下个联系方式，方便后续的问题的跟进

1. var val = getItemValueAsString("班名");
   
2. if(val !=null && val!=""){
   
3. val ="是";
   
4. }else{
   
5. val = "否";
   
6. }
   
7. 
   
8. var col = val+"<script>window.onload = function(){";
   
9. 
   
10. col += " var obj =  document.getElementsByTagName('td');" ;
    
11. 
    
12. col += " for(var i=0;i<obj.length;i++){ " ;
    
13. 
    
14. col += " if(obj.className == 'table_th_td' && obj.innerText=='否'||obj.className == 'table_th_td' && obj.textContent=='') {obj.parentNode.bgColor = 'yellow' ;" ;//判断如果视图的“名称”列的值等于“除灰”，则将该列背景色设置为黄色
    
15. 
    
16. col += " }" ;
    
17. 
    
18. col += " else if(obj.className == 'table_th_td' && obj.innerText=='是') {obj.parentNode.bgColor = 'pink' ;}" ;
    
19. 
    
20. col += " }};</script>";
    
21. 
    
22. col;
    
23. 这个是视图列添加颜色的代码

复制代码

您 好，请问是否解决 呢？