element plus中修改el-table的样式
文章目录
- 前情提要
- 相关环境
- package.json
- vue代码
- 结果
- 方式一
- 直接看代码
- 方式二
- 直接看代码
前情提要
因为项目中用到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>
结果如下所示
打开浏览器的开发者模式可以看出
