前端-关于element-ui表头吸附的问题

当我接到一个需求说：数据过多滑动表格的时候，看不到表头不知道对应的数据是什么，用户体验操作不友好，要改成表头固定住。我当时听到这个需求都要炸裂了，因为我们表格用的是Element Ui，框架不支持啊！！ 难道要把所有表格都替换成自己手写的吗，这个工作量太大了啦‍～～

经过几天几夜的思考，大聪明的我想到了2个方案，废话不说，直接上干货

***第一种方案：

el-table 添加height属性，即可以实现头部固定，但是这个属性不太适合我们公司的业务，因为我们的后台界面基本都是上部分已经占了部分面积，到了小屏幕电脑，表格的视图区会很少，所以这个方案我是不考虑的了‍

***第二种方案： 

就是来一个掩盖手法，当滑动到一定位置时，显示另一个表头，造成像吸顶的感觉，听起来是不是已经有点拨云见日了

1.因为表头固定会在多个地方用到，所以弄成了组件。先创建一个表头的组件pk-table-header

   // 这里的top是因为我们后台顶部会有一些固定提示                                                  {{ item.label }}                                        // vueximport { mapState } from 'vuex';export default {  name: 'pk-table-header',  props: {    // 列表    columns: {      type: Array,      default: () => []    }  },  computed: {    ...mapState({      navHeightV2: (state) => state.app.navHeightV2 // 导航栏高度V2    })  }};.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文件里添加以下方法，因为如果表格有做左侧或右侧固定，表格滑动时表头组件也要跟着滑动

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  
3.下面就是要开始使用前面两个步骤的代码了
 

• 引入表头组件，引入数据，引入表格方法
  • 在mounted的时候监听滚动事件

    【效果展示 】

     ~~ END ~~