快捷導(dǎo)航

關(guān)于element-ui表頭吸附問(wèn)題的解決方案

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

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

前幾天我接到一個(gè)需求說(shuō)：數(shù)據(jù)過(guò)多滑動(dòng)表格的時(shí)候，看不到表頭不知道對(duì)應(yīng)的數(shù)據(jù)是什么，用戶體驗(yàn)操作不友好，要改成表頭固定住。我當(dāng)時(shí)聽(tīng)到這個(gè)需求都要炸裂了，因?yàn)槲覀儽砀裼玫氖荅lement Ui，框架不支持?。?！難道要把所有表格都替換成自己手寫的嗎，這個(gè)工作量太大了啦

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

第一種方案：

el-table 添加height屬性，即可以實(shí)現(xiàn)頭部固定，但是這個(gè)屬性不太適合我們公司的業(yè)務(wù)，因?yàn)槲覀兊暮笈_(tái)界面基本都是上部分已經(jīng)占了部分面積，到了小屏幕電腦，表格的視圖區(qū)會(huì)很少，所以這個(gè)方案我是不考慮的了

第二種方案：

就是來(lái)一個(gè)掩蓋手法，當(dāng)滑動(dòng)到一定位置時(shí)，顯示另一個(gè)表頭，造成像吸頂?shù)母杏X(jué)，聽(tīng)起來(lái)是不是已經(jīng)有點(diǎn)撥云見(jiàn)日了

1.因?yàn)楸眍^固定會(huì)在多個(gè)地方用到，所以弄成了組件。先創(chuàng)建一個(gè)表頭的組件pk-table-header

<template>
  <div
    id="fix-table-header"
    class="table-wrapper"
    :style="{top: `${navHeightV2}px`}"> // 這里的top是因?yàn)槲覀兒笈_(tái)頂部會(huì)有一些固定提示
    <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 // 導(dǎo)航欄高度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文件里添加以下方法，因?yàn)槿绻砀裼凶鲎髠?cè)或右側(cè)固定，表格滑動(dòng)時(shí)表頭組件也要跟著滑動(dòng)

export const hanldeTableScroll = (vue) => {
  vue.$nextTick(() => {
    if (!vue.$refs.table) return;
    // 獲取表格實(shí)例
    const tableEl = vue.$refs.table.$el;
    const mainTable = tableEl.querySelectorAll('.el-table__body-wrapper')[0];
    // 獲取表頭組件實(shí)例
    const tableHeaderEl = vue.$refs.tableHeader.$el;
    // 處理因?yàn)樽髠?cè)或右側(cè)固定，滑動(dòng)時(shí)，表頭組件跟著滑動(dòng)
    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;
    };
    // 判斷表頭組件什么時(shí)候顯示
    const rect = tableEl.getBoundingClientRect();
    const top = rect.top || tableEl.offsetTop;
    // 這里是我們公司業(yè)務(wù)需要兼容頂部通知、到期等顯示
    let stickyTop = vue.$store.state.app.navHeightV2;
    let shouldFixHeader = top < stickyTop;

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

3.下面就是要開(kāi)始使用前面兩個(gè)步驟的代碼了