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

前几天我接到一个需求说:数据过多滑动表格的时候,看不到表头不知道对应的数据是什么,用户体验操作不友好,要改成表头固定住。我当时听到这个需求都要炸裂了,因为我们表格用的是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的时候监听滚动事件 ​

【效果展示 】

相关推荐
我要洋人死21 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人32 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人33 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR38 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香40 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969343 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#