el-drawer内部el-table表头吸顶
时间: 2024-10-13 08:00:38 浏览: 43
在Element UI库中的`<el-drawer>`组件通常用于创建侧边栏抽屉,而`<el-table>`则是数据表格组件。当你在`<el-drawer>`内嵌套`<el-table>`并希望表头固定不动,使其始终保持在顶部,可以使用`el-table`的`sticky`属性,设置`header`为`true`。
例如:
```html
<template>
<el-drawer :width="200" :visible.sync="drawerVisible">
<el-table sticky header="always" :data="tableData">
<!-- 表头 -->
<el-table-column type="index"></el-table-column>
<el-table-column property="name" label="姓名"></el-table-column>
<!-- ...其他列... -->
</el-table>
</el-drawer>
</template>
<script>
export default {
data() {
return {
drawerVisible: false,
tableData: [
// 表格数据...
]
};
}
};
</script>
```
这里的`:sticky.header="always"`表示当窗口滚动时,表头会一直保持在上方。当然,你可以根据需要调整`sticky`的值,如`top`、`bottom`等,来控制表头位置。
阅读全文