vue2加深el-table单选高亮颜色的秘诀，给你不一样的视觉体验

前端

2023-03-25 09:01:08

用 Vue.js 加深 el-table 单选行高亮颜色

在当今数据驱动的时代，表格是网站和应用程序中不可或缺的元素。它们以组织和易于理解的方式呈现数据，使我们能够快速而轻松地提取见解。然而，有时默认的表格样式可能不符合我们的审美偏好或用户体验需求。

本文将介绍如何使用 Vue.js 修改 el-table 单选行的高亮颜色，使其更加醒目，让表格更具吸引力。

为何修改单选行高亮颜色？

默认情况下，el-table 的单选行高亮颜色可能较浅，在某些情况下，这可能会导致可读性问题，特别是当表格背景色较浅时。加深高亮颜色可以提高对比度，让用户更容易识别选定的行。

如何修改单选行高亮颜色？

步骤 1：安装样式化工具

首先，我们需要安装一个样式化工具来覆盖 el-table 的默认样式。推荐使用 Sass 或 Stylus 等 CSS 预处理器。

npm install --save-dev sass

步骤 2：创建样式文件

接下来，创建一个样式文件（例如，custom-styles.scss）并引入它到 Vue.js 组件中。

<style lang="scss">
// 自定义样式
</style>

步骤 3：覆盖默认样式

在样式文件中，找到以下 CSS 选择器：

.el-table__body tr.current-row > td.el-table__cell

该选择器针对当前选中的行中的单元格。我们可以在此基础上修改 background-color 属性以更改高亮颜色。

.el-table__body tr.current-row > td.el-table__cell {
  background-color: #0099FF !important;
}

代码示例

<template>
  <el-table :data="tableData" stripe>
    <el-table-column property="name" label="名称"></el-table-column>
    <el-table-column property="age" label="年龄"></el-table-column>
  </el-table>
</template>

<style lang="scss">
.el-table__body tr.current-row > td.el-table__cell {
  background-color: #0099FF !important;
}
</style>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 30 },
        { name: 'Jane', age: 25 },
        { name: 'Peter', age: 40 },
      ]
    }
  }
}
</script>