图文详解Element-UI中自定义修改el-table样式

我会详细讲解如何自定义修改el-table样式。

1. 准备工作

在开始前，请确保你已经安装了element-ui，并且已经能够正常使用。同时，也需要了解一些基础的css知识。

2. 定义CSS样式

首先，我们需要定义一些CSS样式来修改el-table的外观。以下是一些常用的CSS样式：

/* 设置表格的边框 */
.el-table__body {
  border: 1px solid #ebeef5;
}

/* 设置表头字体颜色和背景颜色 */
.el-table__header th {
  color: #333;
  background-color: #f5f7fa;
}

/* 设置表格奇数行背景颜色 */
.el-table__row--striped:nth-of-type(odd) {
  background-color: #f9fafc;
}

/* 设置表格偶数行背景颜色 */
.el-table__row--striped:nth-of-type(even) {
  background-color: #fff;
}

/* 设置表格行的高亮颜色 */
.el-table__row:hover {
  background-color: #f5f7fa;
}

在CSS中，我们可以设置表格的边框、表头的字体颜色和背景颜色、表格奇数行和偶数行的背景颜色，还可以设置表格行的高亮颜色。

3. 使用CSS样式

接下来，我们需要将定义好的CSS样式应用到el-table中。有两种常用的方法：

方法一：使用修改器

在el-table组件中，可以使用::v-deep这个修改器来修改CSS样式，如下所示：

<template>
  <el-table>
    <!-- ...省略其他代码... -->
  </el-table>
</template>

<style scoped>
/* 修改表格样式 */
::v-deep .el-table__body {
  border: 1px solid #ebeef5;
}

::v-deep .el-table__header th {
  color: #333;
  background-color: #f5f7fa;
}

::v-deep .el-table__row--striped:nth-of-type(odd) {
  background-color: #f9fafc;
}

::v-deep .el-table__row--striped:nth-of-type(even) {
  background-color: #fff;
}

::v-deep .el-table__row:hover {
  background-color: #f5f7fa;
}
</style>

在<style>标签中，使用::v-deep修改器来修改CSS样式，这样可以避免CSS样式被忽略。

方法二：使用样式作用域

除了使用修改器外，我们还可以使用样式作用域来修改el-table的样式。使用该方法时，我们需要将CSS样式放在一个新的<style>标签中，并且添加scoped属性，如下所示：

<template>
  <el-table>
    <!-- ...省略其他代码... -->
  </el-table>
</template>

<style scoped>
/* 修改表格样式 */
.el-table__body {
  border: 1px solid #ebeef5;
}

.el-table__header th {
  color: #333;
  background-color: #f5f7fa;
}

.el-table__row--striped:nth-of-type(odd) {
  background-color: #f9fafc;
}

.el-table__row--striped:nth-of-type(even) {
  background-color: #fff;
}

.el-table__row:hover {
  background-color: #f5f7fa;
}
</style>

在该方法中，样式作用域可以避免样式的污染。

4. 示例说明

示例一：修改表格边框

我们可以使用以下CSS样式来修改表格的边框：

.el-table__body {
  border: 1px solid #ebeef5;
}

在表格中使用该样式，代码如下：

<el-table>
  <!-- ...省略其他代码... -->
</el-table>

<style scoped>
.el-table__body {
  border: 1px solid #ebeef5;
}
</style>

这样就可以将表格的边框修改为1像素、灰色的实线边框。

示例二：修改表头样式

我们可以使用以下CSS样式来修改表头的样式：

.el-table__header th {
  color: #333;
  background-color: #f5f7fa;
}

在表格中使用该样式，代码如下：

<el-table>
  <!-- ...省略其他代码... -->
</el-table>

<style scoped>
.el-table__header th {
  color: #333;
  background-color: #f5f7fa;
}
</style>

这样就可以将表头的字体颜色修改为黑色，背景颜色修改为灰色。