修改elementui表格固定列样式
时间: 2023-08-06 13:08:30 浏览: 53
要修改 ElementUI 表格的固定列样式,可以通过以下方式进行:
1. 使用 scoped slot 自定义表格列的样式,例如:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="{row}">
<div :class="{'fixed-column': row.fixed}">
{{ row.name }}
</div>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" width="180">
<template slot-scope="{row}">
<div :class="{'fixed-column': row.fixed}">
{{ row.age }}
</div>
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="{row}">
<div :class="{'fixed-column': row.fixed}">
{{ row.address }}
</div>
</template>
</el-table-column>
</el-table>
</template>
<style scoped>
.fixed-column {
position: sticky;
left: 0;
background-color: #fff;
z-index: 1;
}
</style>
```
在上面的代码中,我们使用了 `slot-scope` 来获取当前行的数据 `row`,并通过给 `div` 添加 `fixed-column` 类来设置固定列的样式。
2. 使用 CSS 选择器选择表格中的固定列,例如:
```css
.el-table .el-table__fixed .el-table__body-wrapper tbody tr td {
position: sticky;
left: 0;
background-color: #fff;
z-index: 1;
}
```
在上面的代码中,我们使用了 CSS 选择器来选择表格中的固定列,然后设置它们的样式。
注意:在使用 CSS 选择器选择表格中的固定列时,需要注意选择器的优先级,以避免样式被覆盖。
相关推荐
![vue](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)