el-table 表格表头、单元格、滚动条样式修改

.2023.11.21今天我学习了如何对el-table表格样式进行修改，如图：

运用的两个样式主要是

1.header-cell-class-name（设置表头）

2.class-name（设置行单元格）

代码如下：

<el-table :data="typeList"
                class="real_operation_table"
                :header-cell-class-name="'header_name_style'">
        <el-table-column :class-name="'all_cell_style'" align="center" v-for="(value, key) in typeList[0]" :key="key"
                         :prop="key">
          <template slot="header" slot-scope="scope">
            <span>{
   
   { value.name }}</span>
          </template>
          <template slot-scope="scope">
            <span>{
   
   { scope.row[key].value }}</span>
          </template>
        </el-table-column>
      </el-table>

.el-table如果有class记得换成自己的类名 ，没有就直接用el-table

//添加表头表格颜色
::v-deep .header_name_style {
  background-color: rgb(4, 62, 114) !important;
  color: #4cd0ee;
  font-size: 20px;
}

//添加单元格背景颜色
::v-deep .all_cell_style {
  background-color: rgb(5, 35, 61);
  color: #4cd0ee;
  font-size: 20px;
}

//去掉表格底部边框
.real_operation_table::before {
  width: 0;
}

//去掉单元格边框
::v-deep .real_operation_table .el-table__cell {
  border: none !important;
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  background-color: rgb(5, 35, 61);
}

::v-deep .real_operation_table .el-table__cell.gutter {
  background-color: rgb(6, 71, 128) !important;
}

//鼠标移入效果
::v-deep.real_operation_table {
  // 每行鼠标经过得样式
  .el-table__body tr:hover > td {
    background-color: rgb(5, 35, 61) !important;
  }

  .el-table__body tr.current-row > td {
    background-color: rgb(5, 35, 61) !important;
  }
}

// 滚动条样式
::v-deep ::-webkit-scrollbar {
  width: 0.4vh;
}

::v-deep ::-webkit-scrollbar-track {
  background-color: transparent;
}

::v-deep ::-webkit-scrollbar-thumb {
  background-color: rgb(68, 148, 220);
  border-radius: 4px;
}

//去掉表格背景颜色
::v-deep .el-table {
  background-color: transparent !important;
}