el-table与el-scrollbar结合,表头固定不动
时间: 2023-10-14 12:22:49 浏览: 84
可以使用 `el-table` 组件的 `height` 属性来设置表格的高度,然后再结合 `el-scrollbar` 组件来实现滚动条的功能。这样就可以让表头固定不动了。
具体实现方法如下:
1. 在 `el-table` 组件中加入 `height` 属性,并设置为表格的高度,例如:
```
<el-table :data="tableData" height="200px">
```
2. 在 `el-table` 组件外层加入 `el-scrollbar` 组件,例如:
```
<el-scrollbar>
<el-table :data="tableData" height="200px">
<!-- 表头和表格内容 -->
</el-table>
</el-scrollbar>
```
3. 在 `el-table` 组件中加入 `style` 属性,并设置表头的样式,例如:
```
<el-table :data="tableData" height="200px" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<!-- 其他表格列 -->
</el-table>
```
4. 在 `el-table` 组件中加入 `slot-scope` 属性,并设置 `header` 插槽的样式,例如:
```
<el-table :data="tableData" height="200px" style="width: 100%">
<el-table-column prop="name" label="姓名" slot-scope="{column}">
<div style="text-align: center">{{ column.label }}</div>
</el-table-column>
<el-table-column prop="age" label="年龄" slot-scope="{column}">
<div style="text-align: center">{{ column.label }}</div>
</el-table-column>
<!-- 其他表格列 -->
<template slot="header">
<div style="position: sticky; top: 0; z-index: 1; background-color: #fff;">
<el-table :data="[{}]" style="width: 100%">
<el-table-column prop="name" label="姓名" header-align="center"></el-table-column>
<el-table-column prop="age" label="年龄" header-align="center"></el-table-column>
<!-- 其他表格列 -->
</el-table>
</div>
</template>
</el-table>
```
注意,这里使用了一个空数组作为 `el-table` 的数据源,只是为了让表头渲染出来,实际上并不需要显示任何数据。使用 `position: sticky; top: 0;` 让表头固定在顶部,使用 `z-index: 1;` 让表头在滚动时覆盖在表格内容上方,使用 `background-color: #fff;` 让表头背景色为白色,这样就与表格内容区域区分开了。使用 `header-align="center"` 让表头文字居中显示。
最终的代码如下:
```
<el-scrollbar>
<el-table :data="tableData" height="200px" style="width: 100%">
<el-table-column prop="name" label="姓名" slot-scope="{column}">
<div style="text-align: center">{{ column.label }}</div>
</el-table-column>
<el-table-column prop="age" label="年龄" slot-scope="{column}">
<div style="text-align: center">{{ column.label }}</div>
</el-table-column>
<!-- 其他表格列 -->
<template slot="header">
<div style="position: sticky; top: 0; z-index: 1; background-color: #fff;">
<el-table :data="[{}]" style="width: 100%">
<el-table-column prop="name" label="姓名" header-align="center"></el-table-column>
<el-table-column prop="age" label="年龄" header-align="center"></el-table-column>
<!-- 其他表格列 -->
</el-table>
</div>
</template>
</el-table>
</el-scrollbar>
```