使用elementui的table表头放左侧
时间: 2025-01-25 11:23:02 浏览: 42
### 在 ElementUI 中实现表格表头固定在左侧
为了实现在 `ElementUI` 表格组件中的表头固定于左侧,可以利用 `el-table-column` 的属性 `fixed="left"` 来达成这一效果[^2]。
下面是一个简单的例子展示如何配置:
```html
<template>
<div style="width: 100%;">
<el-table :data="tableData" border style="width: 100%">
<!-- 左侧固定的列 -->
<el-table-column prop="date" label="日期" width="180" fixed="left"></el-table-column>
<!-- 其他不固定的列 -->
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<!-- 更多其他列... -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
// ...更多数据项...
]
}
}
}
</script>
```
当设置了 `fixed="left"` 属性之后,即使滚动水平条,该列也会保持不动而始终位于页面的最左边。对于拥有大量列的数据集来说,这种特性非常有用,因为它允许用户更容易访问到重要的字段而不必频繁调整视图位置。
需要注意的是,如果希望右侧也有类似的固定行为,则可以通过设置 `fixed="right"` 达成同样的目的。此外,整个表格会自动渲染出额外的 DOM 结构用于支撑这些功能,比如 `el-table__fixed` 和 `el-table__fixed-right` 这样的容器节点。
阅读全文
相关推荐


















