要
修改 Element UI 表格组件的样式，可以使用自定义样式类和覆盖默认样式。以下是一些基本的步骤：
1. 在
Vue 组件中引入
Element UI 表格组件。
```javascript
<template>
<el-
table :data="
tableData">
<el-
table-column prop="name" label="Name"></el-
table-column>
<el-
table-column prop="age" label="Age"></el-
table-column>
<el-
table-column prop="address" label="Address"></el-
table-column>
</el-
table>
</template>
<script>
import { El
Table, El
TableColumn } from '
element-
ui';
export default {
components: {
El
Table,
El
TableColumn,
},
data() {
return {
tableData: [
{
name: 'John Doe',
age: 30,
address: '123 Main St',
},
// ...
],
};
},
};
</script>
```
2. 在组件中定义自定义样式类。
```css
.
table-wrapper {
border: 1px solid #ccc;
}
.el-
table__header {
background-color: #f5f5f5;
}
.el-
table__body {
background-color: #fff;
}
```
3. 将自定义样式类应用于
表格组件。
```javascript
<template>
<div class="
table-wrapper">
<el-
table :data="
tableData" class="my-
table">
<el-
table-column prop="name" label="Name"></el-
table-column>
<el-
table-column prop="age" label="Age"></el-
table-column>
<el-
table-column prop="address" label="Address"></el-
table-column>
</el-
table>
</div>
</template>
<style>
.my-
table {
width: 100%;
}
.el-
table__header {
background-color: #f5f5f5;
}
.el-
table__body {
background-color: #fff;
}
</style>
```
在上面的示例中，我们在 `div` 元素上应用了 `.
table-wrapper` 样式类，并在
表格组件上应用了 `.my-
table` 样式类。然后，我们覆盖了
表格组件的默认样式，例如表头和表体的
背景颜色。
3964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
