element固定表头
时间: 2023-08-22 16:07:33 浏览: 58
要实现element固定表头,可以使用element-ui提供的el-table组件,结合CSS的position:fixed属性来实现。
具体步骤如下:
1. 给el-table组件添加ref属性。
2. 在mounted生命周期中,获取el-table的表头元素和表格内容元素。
3. 给表头元素添加position:fixed属性,并设置top和left的值为0,使其固定在页面顶部。
4. 给表格内容元素添加padding-top属性,值为表头元素的高度,以避免表格内容与表头重叠。
示例代码如下:
```
<template>
<el-table ref="fixedTable" :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></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>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2022-01-01',
name: '张三',
address: '北京市朝阳区'
}, {
date: '2022-01-02',
name: '李四',
address: '北京市海淀区'
}, {
date: '2022-01-03',
name: '王五',
address: '北京市西城区'
}]
}
},
mounted() {
const tableHeader = this.$refs.fixedTable.$el.querySelector('.el-table__header-wrapper');
const tableBody = this.$refs.fixedTable.$el.querySelector('.el-table__body-wrapper');
tableHeader.style.position = 'fixed';
tableHeader.style.top = '0';
tableHeader.style.left = '0';
tableBody.style.paddingTop = `${tableHeader.offsetHeight}px`;
}
}
</script>
```