在
Element-
UI 的
table 组件
中，可以通过设置 `height` 和 `max-height` 来
实现表格的
固定高度。同时，通过设置 `fixed` 属性可以
实现表头
固定。要同时
实现第一行固定，可以使用 `append` slot，将
第一行作为
table 的子组件插入到
table 中，并设置其样式为
固定位置。
具体
实现可以参考以下代码：
```html
<template>
<el-
table
:data="
tableData"
:height="
tableHeight"
max-height="500px"
:header-cell-style="{ 'background-color': '#f5f7fa', 'color': '#333', 'font-weight': 'bold' }"
:row-class-name="
tableRowClassName"
fixed
>
<template slot="append">
<el-
table-column
v-for="(item, index) in
tableData[0]"
:key="index"
:label="index === 0 ? '' : item"
:width="index === 0 ? '50px' : '100px'"
:fixed="index === 0"
class-name="first-column"
>
<template slot-scope="{ row }">
<div v-if="index === 0">{{ row[0] }}</div>
<div v-else>{{ row[index] }}</div>
</template>
</el-
table-column>
</template>
<el-
table-column
v-for="(item, index) in
tableData[0]"
:key="index"
:prop="index === 0 ? 'id' : item"
:label="index === 0 ? 'ID' : item"
:width="index === 0 ? '50px' : '100px'"
:fixed="index === 0"
></el-
table-column>
</el-
table>
</template>
<script>
export default {
data() {
return {
tableData: [
['ID', 'Name', 'Age', 'Gender', 'Address'],
['1', 'John', '20', 'Male', 'New York'],
['2', 'Mary', '25', 'Female', 'Los Angeles'],
['3', 'Tom', '30', 'Male', 'Chicago'],
['4', 'Lucy', '35', 'Female', 'Houston'],
['5', 'David', '40', 'Male', 'Philadelphia']
]
}
},
computed: {
tableHeight() {
const headerHeight = document.querySelector('.el-
table__header-wrapper').offsetHeight
const appendHeight = document.querySelector('.el-
table__append-wrapper').offsetHeight
return `calc(100vh - ${headerHeight + appendHeight}px)`
}
},
methods: {
tableRowClassName({ rowIndex }) {
if (rowIndex === 0) {
return 'first-row'
}
}
}
}
</script>
<style scoped>
.el-
table__header-wrapper {
position: sticky;
top: 0;
z-index: 1;
}
.el-
table__append-wrapper {
position: sticky;
top: 40px;
z-index: 1;
}
.first-row {
position: sticky;
top: 40px;
z-index: 1;
}
.first-column {
text-align: center;
}
</style>
```
在上面的代码
中，我们通过 `append` slot 将
第一行作为子组件插入到
table 中，并设置其样式为 `position: sticky; top: 40px;`
实现第一行固定。同时，设置了表头和第一列的 `fixed` 属性，
实现表头和第一列
固定。为了使
表格高度能够自适应
页面高度，我们通过计算表头和
第一行的高度，来动态设置
表格的高度。
本文介绍了如何在使用Element-UI框架的table组件时，实现表格的表头固定以及添加表尾合计行的功能。通过设置'show-summary'字段，并可自定义合计行显示文字。
最低0.47元/天 解锁文章
1813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
