elementUI修改table样式

在Vue项目中，如果使用的是单文件组件（.vue），并且样式是通过<style>标签定义的，vue2可以使用/deep/，vue3可以使用::v-deep选择器来修改ElementUI组件的样式。

1.修改表头背景色

  /deep/.el-table__header th {
    background-color: #000f1c;
    color: #3b496b;
  }

2.设置表格背景色

  /deep/.el-table,
  /deep/.el-table__expanded-cell {
    background-color: #000f1c !important;
  }

3.设置表格边框

  /deep/.el-table tr,
  /deep/.el-table th,
  /deep/.el-table td {
    border: none !important;
  }

4.修改滚动条样式

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #104ddb;
  }
  ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #0071bb;
    border-radius: 6px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0b253a;
  }

5.设置隔行变色

<script> 
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      console.log(row);
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  }
}
</script>

<style scoped lang="scss">
  /deep/.el-table .warning-row {
    background: #000f1c;
    color: #ffffff;
    border: 0;
  }

  /deep/.el-table .success-row {
    background: #041628;
    color: #ffffff;
  }
</style>

6.鼠标滑过当前行变色

  /deep/.el-table__body tr:hover > td {
    background-color: #083a5a !important;
  }

7.完整代码

<template>
  <div class="cameraList">
    <el-table
      :data="tableData"
      style="width: 30%"
      height="200"
      size="mini"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  methods: {
    // 表格隔行变色
    tableRowClassName({ row, rowIndex }) {
      console.log(row);
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
};
</script>
<style scoped lang="scss">
.cameraList {
  width: 1920px;
  height: 1080px;
  background: #000f1c;

  /* elementUI表格table样式修改 */
  /deep/.el-table__header th {
    background-color: #000f1c;
    color: #3b496b;
  }
  /deep/.el-table .warning-row {
    background: #000f1c;
    color: #ffffff;
    border: 0;
  }

  /deep/.el-table .success-row {
    background: #041628;
    color: #ffffff;
  }

  // 鼠标滑过，当前行变色
  /deep/.el-table__body tr:hover > td {
    background-color: #083a5a !important;
  }

  // 表格背景色
  /deep/.el-table,
  /deep/.el-table__expanded-cell {
    background-color: #000f1c !important;
  }

  // 表格边框
  /deep/.el-table tr,
  /deep/.el-table th,
  /deep/.el-table td {
    border: none !important;
  }

  /deep/.el-table::before {
    height: 0;
  }

  // 滚动条上面超出的部分
  /deep/.el-table .el-table__cell.gutter {
    background: #000f1c;
  }

  // 修改滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #104ddb;
  }
  ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #0071bb;
    border-radius: 6px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0b253a;
  }
}
</style>

8.效果图如下