關于element-ui表頭吸附問題的解決方案

更新時間：2024年01月26日 08:27:11 作者：superJane

數(shù)據(jù)過多滑動表格的時候,看不到表頭不知道對應的數(shù)據(jù)是什么,用戶體驗操作不友好,要改成表頭固定住,所以本文給大家介紹了關于element-ui表頭吸附問題的兩個解決方案,需要的朋友可以參考下

前幾天我接到一個需求說：數(shù)據(jù)過多滑動表格的時候，看不到表頭不知道對應的數(shù)據(jù)是什么，用戶體驗操作不友好，要改成表頭固定住。我當時聽到這個需求都要炸裂了，因為我們表格用的是Element Ui，框架不支持啊??！難道要把所有表格都替換成自己手寫的嗎，這個工作量太大了啦

經(jīng)過幾天幾夜的思考，大聰明的我想到了2個方案，廢話不說，直接上干貨

第一種方案：

el-table 添加height屬性，即可以實現(xiàn)頭部固定，但是這個屬性不太適合我們公司的業(yè)務，因為我們的后臺界面基本都是上部分已經(jīng)占了部分面積，到了小屏幕電腦，表格的視圖區(qū)會很少，所以這個方案我是不考慮的了

第二種方案：

就是來一個掩蓋手法，當滑動到一定位置時，顯示另一個表頭，造成像吸頂?shù)母杏X，聽起來是不是已經(jīng)有點撥云見日了

1.因為表頭固定會在多個地方用到，所以弄成了組件。先創(chuàng)建一個表頭的組件pk-table-header

<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文件里添加以下方法，因為如果表格有做左側(cè)或右側(cè)固定，表格滑動時表頭組件也要跟著滑動

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;
    // 處理因為左側(cè)或右側(cè)固定，滑動時，表頭組件跟著滑動
    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;
    // 這里是我們公司業(yè)務需要兼容頂部通知、到期等顯示
    let stickyTop = vue.$store.state.app.navHeightV2;
    let shouldFixHeader = top < stickyTop;

    tableEl.style.zIndex = shouldFixHeader ? 0 : 5;
  });
};

3.下面就是要開始使用前面兩個步驟的代碼了