el-table表格根据数据增加样式

376 阅读1分钟

这个prop绑定的字段如果为0的时候 这行加一个背景样式

         <el-table
              v-loading="loading"
              :data="logList"
              :row-class-name="tableRowClassName"
              :cell-style="cellStyle"
              @selection-change="handleSelectionChange"
            >
            /**设置表格行颜色**/
            tableRowClassName({ row, rowIndex }) {
              console.log(row);
              if (row.eventstatus == 0) {
                return "warning-row";
              }
              return "";
            },
                // 下面的表格行边框数据
            cellStyle({ row, column, rowIndex, columnIndex }) {
              if(row.eventstatus==0){
                return "border-color:rgba(196,185,185,0.6)!important;";
              }
            },
            

颜色是变了 但是这个函数有一个鼠标悬停的事件 并且这一行数据有一些操作按钮 也有一点bug

           这个颜色在scoped这个里面
           /* 修改鼠标经过表格的颜色 */
        ::v-deep.el-table tbody tr:hover > td {
          background-color: unset;
        }
        </style>
        //下面的样式不能再scoped 
        <style>
        .el-table .warning-row {
          background: rgb(190, 14, 14);
          color: rgb(255, 255, 255);
        }
        .el-table .success-row {
          background: white;
        }
        .el-table tbody tr.el-table__row:hover > td {
          background-color: unset;
        }
        .el-table__body tr.hover-row > td.el-table__cell {
          background-color: unset;
        }
        

image.png

    .el-table__body tr.hover-row > td.el-table__cell {
      background-color: unset;
    }
    不加这个代码 会造出下图bug
    另外background-color: unset; 你也可以写和背景样式一样

image.png