当前位置:   article > 正文

vue3 + element-plus 修改 el-table 鼠标悬停背景、斑马纹颜色、表头颜色_el-table鼠标悬浮单元格改变背景色

el-table鼠标悬浮单元格改变背景色

今天需要修改一下element-plus表格的样式,发现多多少少存在问题。(第二行为悬停样式)

一、修改鼠标悬停样式。

直接通过修改 .el-table__row:hover 时,发现会呈现出一闪一闪的情况,像是因为移出、移入事件干扰。

  1. ::v-deep .el-table__row:hover {
  2. background: rgba(14, 95, 255, 0.5) !important;
  3. }

然后,通过控制器拾取表格,可以查看到.el-table元素,对指定样式进行修改即可(部分会因其它因素干扰而导致效果不显示,需排查)。

  1. .el-table {
  2. // 表格边框的颜色,可以通过这个变量来设置表格的边框颜色。
  3. --el-table-border-color: var(--el-border-color-lighter);
  4. // 表格边框的样式,一般为实线或虚线,可以通过这个变量来设置表格的边框样式。
  5. --el-table-border: 1px solid var(--el-table-border-color);
  6. // 表格中文字的颜色,可以通过这个变量来设置表格中文字的颜色。
  7. --el-table-text-color: var(--el-text-color-regular);
  8. // 表头中文字的颜色,可以通过这个变量来设置表头中文字的颜色。
  9. --el-table-header-text-color: var(--el-text-color-secondary);
  10. // 鼠标悬停在行上时的背景色,可以通过这个变量来设置鼠标悬停时行的背景色。
  11. --el-table-row-hover-bg-color: var(--el-fill-color-light);
  12. // 当前行的背景色,可以通过这个变量来设置当前行的背景色。
  13. --el-table-current-row-bg-color: var(--el-fill-color-light);
  14. // 表头的背景色,可以通过这个变量来设置表头的背景色。
  15. --el-table-header-bg-color: var(--el-bg-color);
  16. // 固定列的阴影样式,可以通过这个变量来设置固定列的阴影样式。
  17. --el-table-fixed-box-shadow: var(--el-box-shadow-light);
  18. // 表格的背景色,可以通过这个变量来设置表格的背景色。
  19. --el-table-bg-color: var(--el-fill-color-blank);
  20. // 表格行的背景色,可以通过这个变量来设置表格行的背景色。
  21. --el-table-tr-bg-color: var(--el-fill-color-blank);
  22. // 展开行的背景色,可以通过这个变量来设置展开行的背景色。
  23. --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
  24. // 左侧固定列的阴影样式,可以通过这个变量来设置左侧固定列的阴影样式。
  25. --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
  26. // 右侧固定列的阴影样式,可以通过这个变量来设置右侧固定列的阴影样式。
  27. --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
  28. }

修改鼠标悬停样式为 --el-table-row-hover-bg-color

  1. .el-table {
  2. --el-table-row-hover-bg-color: rgba(14, 95, 255, 0.5);
  3. }

二、修改斑马纹颜色

  1. <template>
  2. <div>
  3. <el-table :data="tableData" style="width: 100%" :row-style="tableRowStyle">
  4. <el-table-column label="序号" type="index" align="center" />
  5. <el-table-column label="test1" prop="test" align="center" />
  6. <el-table-column label="test2" prop="test2" align="center" />
  7. <el-table-column label="test3" prop="test3" align="center" />
  8. </el-table>
  9. </div>
  10. </template>
  11. <script setup>
  12. import { ref } from 'vue';
  13. const tableData = ref([]);
  14. const tableRowStyle = (row) => {
  15. return row.rowIndex % 2 === 0 ?
  16. { background: 'rgba(14, 95, 255, 0.05)' } :
  17. { background: 'rgba(14, 95, 255, 0.15)' };
  18. };
  19. </script>

三、修改表头颜色

  1. <template>
  2. <div>
  3. <el-table :data="tableData" style="width: 100%"
  4. :header-cell-style="tableHeaderColor">
  5. <el-table-column label="序号" type="index" align="center" />
  6. <el-table-column label="test1" prop="test" align="center" />
  7. <el-table-column label="test2" prop="test2" align="center" />
  8. <el-table-column label="test3" prop="test3" align="center" />
  9. </el-table>
  10. </div>
  11. </template>
  12. <script setup>
  13. import { ref } from 'vue';
  14. const tableData = ref([]);
  15. // 样式调整
  16. const tableHeaderColor = {
  17. background: '#E1EAF3 !important',
  18. color: '#333333',
  19. fontSize: '14px',
  20. textAlign: 'center',
  21. }
  22. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/码创造者/article/detail/833482
推荐阅读
相关标签
  

闽ICP备14008679号