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>