vue3修改el-table样式

在Vue 3中，修改Element Plus中el-table的样式可以通过CSS来实现。你可以使用深度选择器 >>> 或 /deep/（已在Vue 3中弃用）来穿透组件边界并选择特定的内部元素进行样式修改。

以下是一个示例，展示了如何使用CSS修改el-table的样式：

<template>
  <el-table
    :data="tableData"
    class="custom-table"
  >
    <!-- 列配置 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
 
const tableData = ref([
  // 数据列表
]);
</script>
 
<style scoped>
.custom-table {
  width: 100%;
  /* 其他需要添加的样式 */
}
 
.custom-table .el-table__row {
  background-color: #f2f2f2; /* 修改行背景色 */
}
 
.custom-table .el-table__header-wrapper tr {
  background-color: #333; /* 修改表头背景色 */
  color: #fff; /* 修改表头字体颜色 */
}
 
.custom-table .el-table__body td {
  border-bottom: 1px solid #ddd; /* 修改单元格下边框 */
}
</style>

在上述代码中，.custom-table 是用于定制el-table的类名，你可以在这个类名下添加任何想要的CSS样式来修改表格的外观。

请注意，如果你使用的是Vue 3和Element Plus的最新版本，深度选择器 >>> 已被 [deep] 所取代。例如，使用 [deep] .el-table__row 来代替 >>> .el-table__row。