element Table表格组件实现弹窗内表格固定表头

想散在风中

已于 2024-02-27 09:57:22 修改

阅读量1.9k

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-24 09:58:26 首次发布

文章介绍了如何在Vue项目中，利用自定义指令`tableFixedDialog`和`tableFixed`来实现弹窗内的elementTable组件表头固定。通过查找父节点和监听滚动事件，动态调整表格样式，保证在滚动时表头始终保持可见。该方法涉及DOM操作和事件处理，适用于需要在对话框中展示固定表头的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element Table组件实现弹窗内表格固定表头

（1）在项目 utils 文件夹下新建自定义指令文件 directives.js

import Vue from 'vue';
import { Message } from 'element-ui';

// 查找父节点
function findParent(e, node) {
  if(e._prevClass && e._prevClass.indexOf(node) >= 0) {
    return e
  } else {
    return findParent(e.parentNode, node)
  }
}

// 弹窗表格内固定表头
Vue.directive('tableFixedDialog', {
  inserted: function(el) {
    // 获取滚动层
    let listenEl = findParent(el, 'el-dialog__body')
    // 获取整个弹出框
    let dialogBox = findParent(el, 'el-dialog')
    function handleScroll() {
      let defaultClass = el._prevClass
      console.log(88888)
      console.log(listenEl.scrollTop)
      console.log(el.offsetTop)
      console.log(dialogBox.offsetTop)
      let scrollTop = listenEl.scrollTop // 滚动距离
      let scrollHeight = el.offsetTop - listenEl.offsetTop // 滚动到此高度时fixed

      if (scrollTop > scrollHeight) {
        el.className = defaultClass + ' fixed-table'
        el.querySelector('.el-table__header-wrapper').style.width = el.offsetWidth + 'px'
        el.querySelector('.el-table__header-wrapper').style.top = listenEl.offsetTop + dialogBox.offsetTop - 24 + 'px'
        el.querySelectorAll('.el-table__fixed-header-wrapper').forEach(e => {
          e.style.top = scrollTop - scrollHeight + 'px'
        })
        el.querySelectorAll('.el-table__fixed-body-wrapper').forEach(e => {
          e.style.top = listenEl.offsetTop + dialogBox.offsetTop - 4 + 'px'
        })

      } else {
        el.className = defaultClass
        el.querySelectorAll('.el-table__fixed-header-wrapper').forEach(e => {
          e.style.top = 0 + 'px'
        })
        el.querySelectorAll('.el-table__fixed-body-wrapper').forEach(e => {
          e.style.top = el.querySelector('.el-table__fixed-header-wrapper').clientHeight - 1 + 'px'
        })
      }
    } 
    listenEl.addEventListener('scroll', handleScroll, true)
  }
});

// 表格内固定表头
Vue.directive('tableFixed', {
  inserted: function(el) {  
    // 获取滚动层
    let listenEl = document.documentElement || document.body
    function handleScroll() {
      let defaultClass = el._prevClass
      console.log(6767)
      let scrollTop = listenEl.scrollTop // 滚动距离
      let fixedHeaderHeight = document.querySelector('.fixed-header').clientHeight
      let scrollHeight = el.offsetTop - fixedHeaderHeight// 滚动到此高度时fixed
      console.log(scrollTop)
      console.log(scrollHeight)
      if(scrollTop>0) {
        if (scrollTop > scrollHeight) {
          el.className = defaultClass + ' fixed-table'
          el.querySelector('.el-table__header-wrapper').style.width = el.offsetWidth + 'px'
          el.querySelector('.el-table__header-wrapper').style.top = fixedHeaderHeight + 'px'
          el.querySelectorAll('.el-table__fixed-header-wrapper').forEach(e => {
            e.style.top = scrollTop - scrollHeight - 1 + 'px'
          })
          el.querySelectorAll('.el-table__fixed-body-wrapper').forEach(e => {
            e.style.top = fixedHeaderHeight  - 20 + 'px'
          })
  
        } else {
          el.className = defaultClass
          el.querySelectorAll('.el-table__fixed-header-wrapper').forEach(e => {
            e.style.top = 0 + 'px'
          })
          el.querySelectorAll('.el-table__fixed-body-wrapper').forEach(e => {
            e.style.top = el.querySelector('.el-table__fixed-header-wrapper').clientHeight + 'px'
          })
        }
      }
    } 
    window.addEventListener('scroll', handleScroll, true)
  }
});

（2）在main.js文件引入

import './utils/directives';

（3）在Table组件<el-table>标签加上这个 v-tableFixedDialog 属性窗口就可以固定弹窗内表格表头。

实际效果请根据个人项目调整！