element UI 的el-table表格使用

一.修改样式，自定义样式（背景颜色，字体颜色，间距），使用到深度选择器 /deep/

1.结构,在el-table外，再套一层div

<div class="el_box">

<el-table></el-table>

</div>

样式：

/* 表格公共样式 */
.userbox {
  width: 100%;
  margin: 1% 0;
  background-color: rgb(25, 65, 102, 0.1);
}

.userbox /deep/ .el-table--fit {
  padding: 20px;
}
.userbox .el-table {
  width: 21rem;
}

.userbox /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.userbox /deep/ .el-table tr {
  color: rgb(194, 192, 192);
  background-color: transparent !important;
}
.userbox /deep/ .el-table th {
  /* background-color: transparent!important; */
  color: #fff;
  background-color: rgb(34, 86, 134, 0.3) !important;
}
/* hover经过 */
.userbox /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}

.userbox /deep/ .el-table::before {
  /* //去除底部白线 */
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

二.修改某一行样式，在此对字体颜色做修改，一样的写法

<div class="userbox">
      <el-table
        v-bind="gatewayInfoData"
      :row-style="rowClass" //回调函数
      >
 </el-table>
    </div>

rowClass ({ row, rowIndex }) {
  // console.log(JSON.stringify(row));
  // 状态列字体颜色
if (row.onOff == "在线") {
   return { "color": "rgb(8, 152, 248)" }
  } 
  else {
    // return 'color: #fff'//默认颜色
   return { "color": "#fff" }
  }
},

三，修改某一列样式 （:cell-style针对列做修改）

    <div class="userbox">
      <el-table
        :data="deviceInfoData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        :cell-style="cellStyle"
        
         >
  </el-table>

</div>

// e-table
/***
 * row为某一行的除操作外的全部数据
 * column为某一列的属性
 * rowIndex为某一行（从0开始数起）
 * columnIndex为某一列（从0开始数起）
 */
cellStyle ({ row, column, rowIndex, columnIndex }) {
  // 状态列字体颜色
  if (row.onOff === '离线' && ( columnIndex === 0 ||  columnIndex === 1 )) {
    return 'color: #fff'
  } else if (row.onOff === '在线'&& ( columnIndex === 0|| columnIndex === 1 )) {
    return 'color: rgb(8, 152, 248)'
  } else {
    return 'color: #fff'//默认颜色
  }
},