前几天我接到一个需求说:数据过多滑动表格的时候,看不到表头不知道对应的数据是什么,用户体验操作不友好,要改成表头固定住。我当时听到这个需求都要炸裂了,因为我们表格用的是Element Ui,框架不支持啊😭!! 难道要把所有表格都替换成自己手写的吗,这个工作量太大了啦😵💫~~
但是吧 经过几天几夜的思考,大聪明的我想到了2个方案,废话不说,直接上干货👇
第一种方案:
el-table 添加height属性,即可以实现头部固定,但是这个属性不太适合我们公司的业务,因为我们的后台界面基本都是上部分已经占了部分面积,到了小屏幕电脑,表格的视图区会很少,所以这个方案我是不考虑的了😮💨
第二种方案:
就是来一个掩盖手法,当滑动到一定位置时,显示另一个表头,造成像吸顶的感觉,听起来是不是已经有点拨云见日了😁
1.因为表头固定会在多个地方用到,所以弄成了组件。先创建一个表头的组件pk-table-header
xml
<template>
<div
id="fix-table-header"
class="table-wrapper"
:style="{top: `${navHeightV2}px`}"> // 这里的top是因为我们后台顶部会有一些固定提示
<el-table
:data="[]"
style="width: 100%"
v-bind="{...$tableClass}"
class="g-table-wrapper table-header">
<template v-for="(item,index) in columns">
<el-table-column
v-if="item.show"
:key="index"
v-bind="{...item}">
<!-- S 自定义表头 -->
<template v-if="item.type === 'custom'"
slot="header">
{{ item.label }}
</template>
<!-- E 自定义表头 -->
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
// vuex
import { mapState } from 'vuex';
export default {
name: 'pk-table-header',
props: {
// 列表
columns: {
type: Array,
default: () => []
}
},
computed: {
...mapState({
navHeightV2: (state) => state.app.navHeightV2 // 导航栏高度V2
})
}
};
</script>
<style lang="scss" scoped>
.table-wrapper {
position: sticky;
left: 0;
right: 0;
z-index: 4;
}
.g-table-wrapper {
position: relative;
margin-top: -48px;
border: 1px solid #ebeef5;
border-bottom: 0;
}
.table-header {
margin-top: 0;
height: 48px;
overflow: hidden;
}
2.在utils文件里添加以下方法,因为如果表格有做左侧或右侧固定,表格滑动时表头组件也要跟着滑动
ini
export const hanldeTableScroll = (vue) => {
vue.$nextTick(() => {
if (!vue.$refs.table) return;
// 获取表格实例
const tableEl = vue.$refs.table.$el;
const mainTable = tableEl.querySelectorAll('.el-table__body-wrapper')[0];
// 获取表头组件实例
const tableHeaderEl = vue.$refs.tableHeader.$el;
// 处理因为左侧或右侧固定,滑动时,表头组件跟着滑动
mainTable.onscroll = function() {
let mainTableLeft = this.scrollLeft;
let fixTabel = tableHeaderEl.querySelectorAll('.el-table__body-wrapper')[0];
let mainTableHeadr = tableEl.querySelectorAll('.el-table__header-wrapper')[0];
fixTabel.scrollLeft = mainTableLeft;
mainTableHeadr.scrollLeft = mainTableLeft;
};
// 判断表头组件什么时候显示
const rect = tableEl.getBoundingClientRect();
const top = rect.top || tableEl.offsetTop;
// 这里是我们公司业务需要兼容顶部通知、到期等显示
let stickyTop = vue.$store.state.app.navHeightV2;
let shouldFixHeader = top < stickyTop;
tableEl.style.zIndex = shouldFixHeader ? 0 : 5;
});
};
3.下面就是要开始使用前面两个步骤的代码了
-
引入表头组件,引入数据,引入表格方法
-
在mounted的时候监听滚动事件
【效果展示 】