修改elementui表格固定列样式
时间: 2023-08-06 17:08:30 浏览: 90
要修改 ElementUI 表格的固定列样式,可以通过以下方式进行:
- 使用 scoped slot 自定义表格列的样式,例如:
<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
类来设置固定列的样式。
- 使用 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 选择器选择表格中的固定列时,需要注意选择器的优先级,以避免样式被覆盖。
相关推荐
















