快捷導(dǎo)航

elementUI Table組件實現(xiàn)表頭吸頂效果(示例代碼)

更新時間：2025年01月23日 11:17:16 作者：熱忱1128

文章介紹了如何在vue2.6+和elementUI環(huán)境下實現(xiàn)el-table組件的表頭吸頂效果,通過添加樣式、注冊指令、引入指令并在父元素中避免使用overflow:hidden,可以實現(xiàn)場景下表頭始終可見,本文通過實例代碼介紹的非常詳細(xì),感興趣的朋友一起看看吧

需求描述

當(dāng) table 內(nèi)容過多的時候，頁面上滑滾動，表頭的信息也會隨著被遮擋，無法將表頭信息和表格內(nèi)容對應(yīng)起來，需要進(jìn)行表頭吸頂

開始編碼??

環(huán)境：vue2.6+、element UI
step1： 給el-table__header-wrapper加上樣式

//style/sticky-table-header.scss
.el-table[is-sticky] {
  overflow: initial;
  --sticky-top: 0px;
  --stick-zIndex: 5;
  .el-table__header-wrapper{
    position: sticky;
    top: var(--sticky-top);
    z-index: var(--stick-zIndex);
  }
  .el-table__fixed, .el-table__fixed-right{
    overflow: visible;
    z-index: var(--stick-zIndex);
    .el-table__fixed-header-wrapper {
      position: sticky;
      top: var(--sticky-top);
      width: 100%;
      overflow: hidden;
      z-index: var(--stick-zIndex);
    }
    .el-table__fixed-body-wrapper {
      width: 100%;
      overflow: hidden;
    }
  }
  .el-table__fixed-right {
    .el-table__fixed-header-wrapper {
      display: flex;
      justify-content: flex-end;
    }
    .el-table__fixed-body-wrapper {
      display: flex;
      justify-content: flex-end;
    }
  }
  &.el-table--border::after{
    z-index: var(--stick-zIndex);
  }
}
.el-table__fixed {
  --box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.12);
}
.el-table__fixed-right {
  --box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.12);
}
.el-table__fixed, .el-table__fixed-right {
  box-shadow: var(--box-shadow);
}

step2： 注冊指令 directives/sticky-header.js

import '@/styles/sticky-table-header.scss'
export default {
  bind(el, binding) {
    el.setAttribute('is-sticky', true)
    updateStickyTop(el, binding)
  },
  update(el, binding) {
    updateStickyTop(el, binding)
  }
}
const updateStickyTop = (el, binding) => {
  const { value, oldValue } = binding
  if (value === oldValue) return
  const top = Number(value)
  if (!isNaN(top)) {
    el.style.setProperty('--sticky-top', `${top}px`)
  }
}

step3： main.js 引入

import StickyTableHeader from './directives/sticky-header'
Vue.directive('sticky-table-header', StickyTableHeader)

step4： table.vue

<template>
  <div class="wrapper">
    <h3>純CSS表格吸頂</h3>
    <el-radio-group v-model="mode" aria-hidden="true" class="options">
      <el-radio label="normal">正常模式</el-radio>
      <el-radio label="fixedLeft">固定左邊列</el-radio>
      <el-radio label="fixedRight">固定右邊列</el-radio>
      <el-radio label="fixedLeftRight">固定左右列</el-radio>
    </el-radio-group>
    <el-table
      v-sticky-table-header="0"
      border
      :data="tableData"
    >
      <el-table-column label="日期" prop="date" min-width="150" :fixed="fixedLeft" />
      <el-table-column label="姓名" prop="name" width="120" />
      <el-table-column label="省份" prop="province" width="120" />
      <el-table-column label="市區(qū)" prop="city" width="120" />
      <el-table-column label="地址" prop="address" width="300" />
      <el-table-column label="郵編" prop="zip" min-width="120" :fixed="fixedRight" />
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'CSSFixedTopTable',
  components: {},
  data() {
    const tableData = new Array(100).fill(0).map((_, index) => {
      return {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀區(qū)',
        address: `上海市普陀區(qū)金沙江路 ${1 + index} 弄`,
        zip: 2000001 + index
      }
    })
    return {
      tableData,
      mode: 'normal'
    }
  },
  computed: {
    fixedLeft() {
      return /left/i.test(this.mode) ? 'left' : null
    },
    fixedRight() {
      return /right/i.test(this.mode) ? 'right' : null
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 800px;
  margin: 0 auto;
  .options {
    width: 100%;
    margin: 30px 0;
    text-align: left;
  }
}
</style>