优雅配置，随心掌控！定制化el-table，打造专属数据展示风格

如何修改el-table滚动条样式、行高和表格样式？

一、修改el-table滚动条样式

默认的el-table滚动条样式可能与项目风格不符。我们可以通过自定义CSS来修改滚动条样式，以匹配项目需求。

.el-table-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.el-table-body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.el-table-body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.el-table-body::-webkit-scrollbar-thumb:hover {
  background-color: black;
}

二、设置el-table行高

el-table的默认行高可能不符合项目需求。我们可以通过设置CSS来调整行高。

.el-table tr {
  height: 50px;
}

三、自定义表格样式

除了滚动条样式和行高，我们还可以自定义表格的整体样式。

.el-table {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.el-table th {
  background-color: #e0e0e0;
  color: #606266;
  font-weight: bold;
}

.el-table td {
  border-bottom: 1px solid #ddd;
}

四、其他注意事项

• 以上CSS样式需要放在单独的CSS文件中，并引入到页面中。
• 自定义时，需要注意与项目整体风格的一致性。
• el-table还提供了其他丰富的样式选项，可以通过查阅官方文档进行了解和使用。

常见问题解答

1. 如何修改el-table表头背景颜色？

   .el-table thead tr {
     background-color: #your_color;
   }
   

2. 如何隐藏el-table的分页器？

   .el-table--medium .el-pagination {
     display: none;
   }
   

3. 如何设置el-table的最小宽度？

   .el-table {
     min-width: 500px;
   }
   

4. 如何禁用el-table的排序功能？

   .el-table--enable-row-hover .el-table__header th {
     cursor: default;
   }
   

5. 如何让el-table的奇偶行背景色不同？

   .el-table tr:nth-child(odd) {
     background-color: #f5f5f5;
   }
   
   .el-table tr:nth-child(even) {
     background-color: #e0e0e0;
   }