el-table自定义样式

el-table是Element UI中的一个表格组件，可以通过自定义样式来改变表格的外观和交互效果。以下是一些自定义样式的方法：

1. 使用scoped CSS：在组件中使用scoped CSS，可以避免样式污染和冲突。例如：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<style scoped>
.el-table th,
.el-table td {
  text-align: center;
}
</style>

2. 使用CSS类名：可以通过添加CSS类名来自定义表格的样式。例如：

<template>
  <el-table :data="tableData" class="my-table" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<style>
.my-table th,
.my-table td {
  text-align: center;
}
</style>

3. 使用slot-scope：可以通过slot-scope来自定义表格的单元格内容和样式。例如：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name">
      <template slot-scope="{ row }">
        <span :class="{ 'highlight': row.age > 30 }">{{ row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<style>
.highlight {
  color: red;
}
</style>

以上是el-table自定义样式的一些方法，可以根据实际需求选择合适的方法来实现自定义样式。