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,当然也有可能是我写错了,所以我使用了白色加颜色渐变

    这样就可以啦

  • 相关阅读:
    Resharper Visual studio中的插件
    MVC 中Simditor上传本地图片
    MVC编程模型
    数据库面试题
    SQL、索引
    存储过程详解
    EF的简单认识
    MVC是什么
    AOP面向切面编程
    SQL语句基本
  • 原文地址:https://www.cnblogs.com/wangziwei/p/13959215.html
Copyright © 2011-2022 走看看