el-table 复杂表头如何左右固定中间滑动

el-table 的固定列和滑动功能是通过设置 `fixed` 属性和 `scroll` 属性来实现的。 对于复杂表头，可以通过设置 `column-span` 属性来合并单元格，从而实现跨行或跨列的表头布局。同时，需要注意设置固定列时需要将对应的表头列也设置为固定。 以下是一个示例代码，展示了如何实现复杂表头的左右固定中间滑动功能： ```html <template> <el-table :data="tableData" style="width: 100%;" :column-key="columnKey" :height="tableHeight" :header-cell-style="{padding: '12px 0'}" :row-style="{height: '50px'}" :fixed="fixedColumns" :scroll="{ x: tableWidth, y: tableHeight }" > <el-table-column prop="name" label="姓名" width="150" fixed ></el-table-column> <el-table-column prop="age" label="年龄" width="150" fixed ></el-table-column> <el-table-column label="基本信息" :column-key="'basic'" :align="'center'" :width="basicWidth" :fixed="fixedColumns" > <el-table-column prop="gender" label="性别" :column-span="2" :align="'center'" ></el-table-column> <el-table-column prop="birthday" label="生日" :column-span="2" :align="'center'" ></el-table-column> </el-table-column> <el-table-column label="联系方式" :column-key="'contact'" :align="'center'" :width="contactWidth" :fixed="fixedColumns" > <el-table-column prop="phone" label="电话" :column-span="2" :align="'center'" ></el-table-column> <el-table-column prop="email" label="邮箱" ></el-table-column> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男', birthday: '2000-01-01', phone: '12345678901', email: '[email protected]' }, { name: '李四', age: 20, gender: '女', birthday: '1998-01-01', phone: '12345678902', email: '[email protected]' } // ... ], columnKey: 'name', fixedColumns: 'left', // 左侧固定列 tableWidth: 700, // 表格总宽度 basicWidth: 300, // 基本信息列宽度 contactWidth: 400, // 联系方式列宽度 tableHeight: 400 // 表格高度 } } } </script> ``` 在上述代码中，我们设置了一个复杂表头，其中包含了四个表头列，使用 `column-span` 属性实现了跨行和跨列的合并布局。我们同时设置了两个左侧固定列，即姓名和年龄列，以及两个中间滑动的列，即基本信息和联系方式列。 为了实现固定列和滑动功能，我们在 `el-table-column` 组件中设置了 `fixed` 属性和 `scroll` 属性。其中，`fixed` 属性用于指定该列是否固定，可以设置为 `left`、`right` 或 `true`（表示左右都固定）；`scroll` 属性用于指定表格的滚动区域大小，其中 `x` 属性表示横向滚动区域的宽度，`y` 属性表示纵向滚动区域的高度。 最后，我们需要设置表格的总宽度和高度，以及每个列的宽度。需要注意的是，在设置列宽度时，需要考虑到表头的合并布局。