Element UI 数据表格自定义样式修改指南

2024-01-12 05:20:40

修改整个容器的样式

要修改整个容器的样式，可以在标签的 style 中设置样式。例如，以下代码将容器的背景色设置为红色：

<el-table style="background-color: red;">
  ...
</el-table>

2. 修改表头的样式

要修改表头的样式，可以绑定 header-cell-style 函数。该函数返回的是表头的样式。函数在 methods 中定义，格式如下：

methods: {
  headerCellStyle() {
    return {
      backgroundColor: 'blue',
      color: 'white'
    };
  }
}

3. 修改表格行的样式

要修改表格行的样式，可以使用 row-style 函数。该函数返回的是表格行的样式。函数在 methods 中定义，格式如下：

methods: {
  rowStyle() {
    return {
      backgroundColor: 'yellow',
      color: 'black'
    };
  }
}

4. 创建自定义样式

以上只是修改 Element UI 中 el-table 数据表格样式的几种基本方法。您还可以创建自定义样式，使您的数据表格看起来更加美观和符合您的需求。例如，以下代码将创建一种自定义的表格样式：

<style>
.my-table {
  background-color: #f5f5f5;
  border-collapse: collapse;
  border: 1px solid #ddd;
}

.my-table th {
  background-color: #efefef;
  border: 1px solid #ddd;
  padding: 8px 16px;
  text-align: left;
}

.my-table td {
  border: 1px solid #ddd;
  padding: 8px 16px;
  text-align: left;
}
</style>

<el-table class="my-table">
  ...
</el-table>