element-ui 设置table表格单元格背景样式

最新推荐文章于 2024-05-15 21:11:12 发布

夏同学_

最新推荐文章于 2024-05-15 21:11:12 发布

阅读量859

点赞数 1

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/m0_45952220/article/details/119089673

版权

在table表格绑定call-style属性，声明一个方法就可以设置样式了；

<el-table  border stripe   height="76vh" v-loading="loading" :data="deviceList" :cell-style="rowStyle">

这里面的rowStyle就是我声明的一个方法，

 methods: {
    rowStyle({row, column, rowIndex, columnIndex}){
      if (row.warnGrade =='0'){
        return "background:rgb(243 238 68);"
      }
      if (row.warnGrade =='1'){
        return "background:#f1b45e;"
      }
      if (row.warnGrade =='2'){
        return "background:#fa6548;"
      }
    },
}

其中这里面有四个参数，row、column、rowIndex、columnIndex、

row:就是你传过来的对象；

column:就是只设置那一列

rowIndex:就是在哪一行设置样式，rowIndex从0开始的

columnIndex：表达你是要设置第几列，默认不设置就是渲染全部，columnIndex从0开始的