vue3 element el-table表头冻结,表头吸顶directives方法

vue3 element el-table表头冻结,表头吸顶directives方法

1、在文件夹中创建directives文件

在这里插入图片描述

/**
 * 思路:通过简体 el-table的 thead和tbody父级别区域,进行设置对于的fixed
 */

function getElParentBySelector(el, queryClassSelector) {
    if (!el) {
      return el
    }
    if ([...el.classList].includes(queryClassSelector)) {
      return el
    }
    return getElParentBySelector(el.parentNode, queryClassSelector)
  }
  
  function getTableShowWidth(thead) {
    const tableBox = getElParentBySelector(thead, 'el-table')
    return tableBox.getBoundingClientRect().width
  }
  
  function createTableSticky(el, binding) {
    // 获取表格(element)
    console.log(el,99937)
    let thead = el.querySelector('.el-table__header')
    thead = getElParentBySelector(thead, 'el-table__header-wrapper')
    const tbody = el.querySelector('.el-table__body')
  
    //获取thead 的显示宽度
    const headerShowWidth = getTableShowWidth(thead)
  
    // 获取滚动元素
    const scrollParent = document.querySelector(binding.value.parent||'body')
    console.log(scrollParent,binding.value.disabled,88882)
    if (!scrollParent || binding.value.disabled === true) {
      return
    }
    scrollParent.addEventListener('scroll', function () {
        const stickyTop= binding.value.top||0;
      const theadHeight = thead.clientHeight
      // 获取thead距离顶部的距离
      const theadTop = thead.getBoundingClientRect().top
      console.log(theadTop,theadHeight,"theadToptheadTop")
      if (theadTop <= stickyTop) {
        tbody.style.paddingTop = theadHeight + 'px'
        thead.style.position = 'fixed'
        thead.style.zIndex = '2021'
        thead.style.top = stickyTop + 'px'
        thead.style.borderTop = '1px solid #EBEBEB'
  
        //thead.style.width = tbody.offsetWidth + 'px' //
  
        //使用最佳显示宽度显示内容,防止有横向滚动条时,固定列显示超出
         thead.style.width =
          (tbody.offsetWidth < headerShowWidth ? tbody.offsetWidth : headerShowWidth) + 'px'
        
  
        //获取父级别的宽度,设置列头行只能是负极宽度
      }
      // 判断是否需要回归原来位置
      const originally = tbody.getBoundingClientRect().top
      // 判断底部距离是否超过表头
      const goBeyond = tbody.getBoundingClientRect().bottom
      if (originally > stickyTop || goBeyond <= thead.offsetHeight) {
        tbody.style.paddingTop = '0'
        thead.style.position = 'relative'
        thead.style.zIndex = '0'
        thead.style.top = 0 + 'px'
        thead.style.width = tbody.offsetWidth + 'px' //固定表头有bug的话改成 auto
        thead.style.borderTop = 'none'
      }
    })
  }
  
  var clearTimeId = 0;
  const createSticky = {
    mounted(el, binding) {
    //TIP 延时设置,确保表格进行渲染成功!
    // el.addEventListener("scroll", createTableSticky(el, binding));
        clearTimeId = setTimeout(() => {
            createTableSticky(el, binding)
            clearTimeout(clearTimeId)
        }, 1000)
    },
    unmounted(el, binding) {
    clearTimeId && clearTimeout(clearTimeId)
    }
  }
  export default createSticky

2、在main中引用全局

const app = createApp(App);
import createSticky from './directives/sticky'
app.directive('sticky',createSticky)
app.mount("#app");

3、使用:

在这里插入图片描述

v-sticky="{ top: 185, parent: '.page_main' }"

注意:table不要加高度,数据少于高度列时会在数据最后一列那消失
page_main是指有滚轮的父级页面
在这里插入图片描述

参考:

https://blog.csdn.net/qq_28254093/article/details/134642885

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/372208.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

NuxtJs安装Sass后出现ERROR:Cannot find module ‘webpack/lib/RuleSet‘

最近了解NuxtJs时&#xff0c;发现问题比较多&#xff0c;对于初学者来说是件比较头痛的事。这次是安装sass预处理器&#xff0c;通过命令安装后&#xff0c;出现了ERROR&#xff1a;Cannot find module webpack/lib/RuleSet 错误&#xff0c;于是根据之前经验&#xff0c;对版…

Linux--- vim详解

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 “学如逆水行舟&#xff0…

支持多字体、静动态的.NET图片验证码的开源项目

上次分享过 SkiaSharp 这个开源图形项目&#xff0c;并举了一个生成验证码的例子&#xff0c;具体见文章&#xff1a;《SkiaSharp&#xff1a;.NET强大而灵活的跨平台图形库》。 但文中验证码比较简单&#xff0c;刚好看到一个非常不错的图片验证码&#xff0c;分享给大家。 …

【题解】—— LeetCode一周小结5

【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结4 29.自由之路 题目链接&#xff1a;514. 自由之路 电子游戏“辐射4”中&#xff0c;任务 “通向自由” 要求玩家到达名为 “Freedom Trail Ring” 的金属表盘&#xff0c;并使用表盘拼写特定关键…

C++:类的简单介绍(六)——初始化列表

目录 格式&#xff1a; 初始化之间的比较&#xff1a; 普通初始化的缺点&#xff1a; 初始化列表的优势&#xff1a; 必须进行初始化的变量 1、const 修饰的变量 2、被&修饰的变量 引用 3、自定义类型&#xff0c;且没有默认构造函数的成员变量必须走初始化列表…

QT6调用音频输入输出(超详细)

目录 一、QT6音频调用与QT5的区别 1.QAudioSource代替QAudioInput类 2.QAudioSink代替QAudioOutput类 二、音频操作中Push和Pull的区别 三、依托于Websocket实现实时对讲机 1.AudioIputDevices类 2.AudioOutputDevices类 3.实现的AudioHandler类完整内容 本人实际是要完…

作为一个27岁的人,学习单片机然后进入这行的可能性大吗?

作为一个27岁的人&#xff0c;学习单片机然后进入这行的可能性大吗&#xff1f;有c语言基础。&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「c语言的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“…

python-分享篇-小猪佩奇

文章目录 代码效果 代码 # coding:utf-8 import turtle as tt.pensize(4) t.hideturtle() t.colormode(255) t.color((255,155,192),"pink") t.setup(840,500) t.speed(10)#鼻子 t.pu() t.goto(-100,100) t.pd() t.seth(-30) t.begin_fill() a0.4 for i in range(12…

python爬虫概念及介绍

1. 什么是互联网爬虫&#xff1f; 解释 1 &#xff1a;通过一个程序&#xff0c;根据 Url ( http : // www . taobao . com ) 进行爬取网页&#xff0c;获取有用信息 解释 2&#xff1a;使用程序模拟浏览器&#xff0c;去向服务器发送请求&#xff0c;获取响应信息 2. 爬虫核…

C++病毒【永久性】

我最近发现&#xff0c;我2024年后就再也没有更新过 C#沙雕程序了。 今天我想通了&#xff0c;我要再更几期关于C#沙雕程序的文章。 开始做&#xff01; 这一次就直接上代码蚌&#xff01; 不用任何特定头文件。 #include <bits/stdc.h> #include <iostream> #…

【Java基础_02】Java变量

【Java基础_02】Java变量、运算符、程序控制结构 文章目录 1 变量1.1 程序中“”号的使用1.2 数据类型1.3 整数类型1.3.1 整数类型的分类1.3.2 整型的使用细节 1.4 浮点类型1.4.1 浮点型的分类1.4.2 浮点类型使用细节 1.5 字符类型1.5.1 字符类型使用细节1.5.2 字符类型本质1.5…

幻兽帕鲁专用服务器,多人游戏(专用服务器)搭建

玩转幻兽帕鲁服务器&#xff0c;阿里云推出新手0基础一键部署幻兽帕鲁服务器教程&#xff0c;傻瓜式一键部署&#xff0c;3分钟即可成功创建一台Palworld专属服务器&#xff0c;成本仅需26元&#xff0c;阿里云服务器网aliyunfuwuqi.com分享2024年新版基于阿里云搭建幻兽帕鲁服…

网络安全产品之准入控制系统

文章目录 一、什么是准入控制系统二、准入控制系统的主要功能1. 接入设备的身份认证2. 接入设备的安全性检查 三、准入控制系统的工作原理四、准入控制系统的特点五、准入控制系统的部署方式1. 网关模式2. 控制旁路模式 六、准入控制系统的应用场景七、企业如何利用准入控制系统…

程序员为什么不喜欢关电脑,这回答很霸道!

在大家的生活中&#xff0c;经常会发现这样一个现象&#xff1a;程序员经常不关电脑。 至于程序员不关电脑的原因&#xff0c;众说纷纭。 其中这样的一个程序员&#xff0c;他的回答很霸道&#xff1a; “因为我是程序员&#xff0c;我有权选择不关电脑。我需要在任何时候都能够…

python创建udf函数步骤

一、目标 实现一个函数&#xff0c;传入两个datetime类型的参数&#xff0c;返回double类型的工作日天数 二、思路 如何计算差值&#xff1f; 如果开始时间和结束时间在同一天&#xff1a;实现同 datediff(end, start, ‘ss’) / 86400.0 如果开始时间和结束时间在不同天&am…

【教程】Python代码混淆工具,Python源代码保密、加密、混淆

引言 Python作为一种高级脚本语言&#xff0c;便捷的语法和丰富的库使它成为众多开发者的首选。然而&#xff0c;有时候我们希望保护我们的Python源代码&#xff0c;避免被他人轻易获取和篡改。为了实现这一目标&#xff0c;我们可以采取代码混淆的技术手段。本文将介绍Python…

vue3项目打包移除console.log()打印

一、安装terser&#xff08;不安装打包会报错&#xff0c;安装过后无需引入直接使用&#xff09; npm install terser --save-dev二、在vite.config.ts里面使用 build: {minify: "terser",terserOptions:{compress:{drop_console: true,drop_debugger: true,}}}

Vue3.0(三):Vue组件化深入理解

Vue组件化深入理解 生命周期 每个组件都可能经历 创建、挂载、更新、卸载等一系列过程 在每个阶段&#xff0c;我们可能会添加一些属于自己的逻辑代码 在Vue中&#xff0c;生命周期通过生命周期函数实现 生命周期函数实际上就是回调函数&#xff0c;在某个时间会被Vue源码调…

零售的这个销售模式,太震撼了!

随着科技的飞速发展&#xff0c;新零售模式正逐渐改变着传统零售业的面貌。在这个数字化时代&#xff0c;自动售货机作为新零售的一部分&#xff0c;正以其便捷、智能的特性&#xff0c;为商家和消费者带来全新的购物体验。 客户案例 智能便利店 传统便利店运营面临高租金、人…

【STM32+HAL库+CubeMX】UART轮询收发、中断收发、DMA收发方法及空闲中断详解

&#xff08;转载&#xff09;原文链接&#xff1a;https://blog.csdn.net/qq_39344192/article/details/131470735 1. 什么是UART&#xff1f; UART是一种异步串行通信接口&#xff0c;常用于通过串口与外部设备进行通信。它通过发送和接收数据帧来实现数据传输&#xff0c;使…