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._prevClassconsole.log(88888)console.log(listenEl.scrollTop)console.log(el.offsetTop)console.log(dialogBox.offsetTop)let scrollTop = listenEl.scrollTop // 滚动距离let scrollHeight = el.offsetTop - listenEl.offsetTop // 滚动到此高度时fixedif (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 = defaultClassel.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.bodyfunction handleScroll() {let defaultClass = el._prevClassconsole.log(6767)let scrollTop = listenEl.scrollTop // 滚动距离let fixedHeaderHeight = document.querySelector('.fixed-header').clientHeightlet scrollHeight = el.offsetTop - fixedHeaderHeight// 滚动到此高度时fixedconsole.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 = defaultClassel.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 属性窗口就可以固定弹窗内表格表头。
