elementui fixed
Element UI 固定布局（Fixed）使用指南
Element UI 提供了多种固定布局的组件和功能，适用于表格、导航栏等场景。以下是常见固定布局的实现方法：
固定表头或列
在表格组件中，通过设置 height 属性可固定表头，设置 fixed 属性可固定列：
<el-table :data="tableData" height="250">
<el-table-column prop="date" label="日期" width="150" fixed></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
</el-table>height：数值或字符串，设置表格高度后表头自动固定fixed：列属性，支持left或right指定固定方向
固定导航菜单
使用 el-menu 的 collapse 属性实现侧边栏固定收缩：
<el-menu
:default-active="activeIndex"
class="el-menu-vertical-demo"
:collapse="isCollapse"
@select="handleSelect">
<el-menu-item index="1">首页</el-menu-item>
</el-menu>通过 CSS 固定位置：
.el-menu-vertical-demo {
position: fixed;
top: 0;
left: 0;
height: 100vh;
}固定对话框位置
设置 el-dialog 的 lock-scroll 和自定义样式：
<el-dialog
:visible.sync="dialogVisible"
:lock-scroll="true"
custom-class="fixed-dialog">
内容
</el-dialog>.fixed-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}注意事项
- 固定元素可能导致层级问题，通过
z-index调整 - 响应式布局需结合
@media查询调整固定状态 - 表格固定列时，确保列宽总和不超过表格宽度
通过合理组合这些属性和样式，可以轻松实现各类固定布局需求。
