element plus中修改el-table的样式

前情提要

因为项目中用到el-table的时候，需要将el-table表格的样式进行修改，将整个表格的背景颜色从白色变成透明，使得表格变得透明之后，展示颜色是对应父div的背景颜色，这个在可视化大屏的时候或许会经常用到。修改表格悬浮时的颜色，修改表格点击行高亮的颜色样式。在这里记录一下，方便后面直接使用到。这里记录一下，方便下次直接使用到。这里有两种方式，不过都是通过深度选择器进行配置的，避免影响到其他系统使用el-table时的样式。如下所示，假设父div的背景颜色为粉色，el-table默认的样式如下所示：

相关环境

项目使用的是vite+vue3+element plus。下面有两种方式都可以，建议使用方式二。

package.json

{"name": "smart_mining_vue_cesium","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"element-plus": "^2.8.4","vue": "^3.4.37","vue-router": "^4.4.5"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.2","cesium": "^1.121.1","vite": "^5.4.7","vite-plugin-cesium": "^1.2.23"}
}

vue代码

<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><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 setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>
</style>

结果

从图中可以看到，表格的背景颜色为白色，鼠标悬浮颜色为灰色，点击高亮的颜色为比悬浮的颜色稍微深一点。

方式一

这个我也是通过浏览器的开发者模式中进行自己慢慢找对应的css选择器，一步一步修改得到的结果。

直接看代码

如果想知道对应的选择器的样式是什么，把对应的css代码注释掉就行了。

<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><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 setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>:deep(.el-table) {/* 透明度为0，不显示背景色 */background-color: rgba(255, 240, 240, 0);
}/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {/* 透明度为0，不显示背景色 */background-color: rgba(255, 0, 0, 0); /* 文字颜色 */color: skyblue;/* 背景图片，可以为表格头部设置背景颜色，不过如果背景是透明的，可以直接把父div的背景图片当做是这里的图片，只要把表格放在对应的位置就行了，看自己选择 *//* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}/* 头部与body下面的分割线 */
:deep(.el-table th.el-table__cell.is-leaf) {border-bottom: none;
}/* 表格行背景色 */
:deep(.el-table tr) {/* 透明度为0，不显示背景色 */background-color: rgba(255, 0, 0, 0); /* 文字颜色 */color: aquamarine;
}/* 表格行之间的分割线 */
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {border-bottom: none;
}/* 表格底部分割线，不知道表达的是什么，注释一下这个就知道了  */
:deep(.el-table__inner-wrapper:before) {bottom: 0;height: 0px;left: 0;
}/* 鼠标悬停背景色 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {background-color: rgba(116, 85, 228, 0.671);
}/* 鼠标选中背景色，行点击事件 */
:deep(.el-table__body tr.current-row>td.el-table__cell) {background-color: green;
}
</style>

结果如下所示：

方式二

这个我也是通过浏览器的开发者模式中进行自己慢慢找对应的css选择器，一步一步修改得到的结果。

直接看代码

代码如下所示

<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><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 setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>
:deep(.el-table) {--el-table-border-color: var(--el-border-color-lighter);--el-table-border: 0px solid var(--el-table-border-color); /**这里改成0了 */--el-table-text-color: rgb(127, 255, 202); /**文字颜色 */--el-table-header-text-color: rgb(135, 198, 235); /**表头文字颜色 */--el-table-row-hover-bg-color: rgba(116, 85, 228, 0.671); /**行悬浮颜色 */--el-table-current-row-bg-color: rgb(0, 161, 48); /**当前行颜色 */--el-table-header-bg-color: rgba(255, 0, 0, 0); /**表头背景颜色, 透明度为0 */--el-table-fixed-box-shadow: var(--el-box-shadow-light);--el-table-bg-color: rgba(255, 0, 0, 0); /**表格背景颜色, 透明度为0 */--el-table-tr-bg-color: rgba(255, 0, 0, 0); /**表格行的背景颜色, 透明度为0 */;--el-table-expanded-cell-bg-color: var(--el-fill-color-blank);--el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);--el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);--el-table-index: var(--el-index-normal);background-color: rgba(255, 0, 0, 0); /**表格的背景颜色, 透明度为0 */;box-sizing: border-box;color: var(--el-table-text-color);font-size: 14px;height: -moz-fit-content;height: fit-content;max-width: 100%;overflow: hidden;position: relative;width: 100%;
}/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {/* 背景图片，可以为表格头部设置背景颜色，不过如果背景是透明的，可以直接把父div的背景图片当做是这里的图片，只要把表格放在对应的位置就行了，看自己选择 *//* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}/* 表格底部分割线，不知道表达的是什么，注释一下这个就知道了  */
/* :deep(.el-table__inner-wrapper:before) {bottom: 0;height: 0px;left: 0;
} */
</style>

结果如下所示

打开浏览器的开发者模式可以看出