zoukankan      html  css  js  c++  java
  • elementUI中如何根据单元格的值设置背景色长度

    效果图如下

     PS:我这里的基数是190000,所以190000的单元格背景色是满的

    其实很简单,我试了试template发现无法使用:formatter了,所以就去掉了template

    然后看了看官方文档,发现了华点,就是这个

     :cell-style="addClass2"

    把他放在el-table里面

    然后在函数中使用

    addClass2({row,column,rowIndex,columnIndex}){
                for(let i=0;i<43;i++){
                    for(let j=1;j<21;j++){
                        if(rowIndex=== i && columnIndex===j){
                            if((row.local1!== '' && column.label=='本1')){
                                let scc =  ((row.local1/190000)*100)
                                 return{
                                    background: "linear-gradient(90deg,#96d7f9 "+scc+'%'+",transparent 10%)"
                                    };
                            }
    }

    这里的local1是我设置的字段,可以修改,通过判断是否为空获取到列数,然后再通过表头的label获取到第几行,两个都确定之后就可以确定到固定的值了

    再通过拼接字段改变背景色就行了,这里有一个坑,就是不能使用backgroundSize,当然也有可能是我写错了,所以我使用了白色加颜色渐变

    这样就可以啦

  • 相关阅读:
    MongoDB理解
    jQuery+Ajax+PHP实现异步分页数据显示
    PHP设计模式四:适配器模式
    PHP设计模式三:原型设计模式
    Event Managers
    NetAdvantage
    英语
    CA1060
    DateTime和DateTime2
    宿主进程 vshost.exe
  • 原文地址:https://www.cnblogs.com/wangziwei/p/13959215.html
Copyright © 2011-2022 走看看