vue elementui table去掉滚动条与实现表格自动滚动且无滚动条

news2024/9/20 21:30:14

当table内容列过多时,可通过height属性设置table高度以固定table高度、固定表头,使table内容可以滚动。
现在需求是右侧滚动条不好看,需要去除滚动条,并隐藏滚动条所占列的位置。让他可以滚动但是不出现滚动条,不然即时隐藏了滚动条也会有一个空白列影响占位的。

// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
  &::-webkit-scrollbar { // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213,215,220,0.3);
    border: none;
  }
  &::-webkit-scrollbar-track { // 滚动条轨道
    border: none;
  }
}
// --------------------隐藏table gutter列和内容区右侧的空白 start
.el-table th.gutter{
  display: none;
  width:0
}
.el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
.el-table__body{
  width: 100% !important;
}
// --------------------隐藏table gutter列和内容区右侧的空白 end

如果样式不想影响全局,可以使用样式穿透

::v-deep .el-table__body-wrapper {
    // 整个滚动条
    &::-webkit-scrollbar {
        width: 0px; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);
        border: none;
    }
    // 滚动条轨道
    &::-webkit-scrollbar-track {
        border: none;
    }
}
// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {
    display: none;
    width: 0
}
::v-deep .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}
// 这个样式不加的话内容哪里会缺一点,估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}
// --------------------隐藏table gutter列和内容区右侧的空白 end

下面记录代码,亲测有效。
在这里插入图片描述

<div class="leftTopEcharts1">
    <div class="alarm-table">
      <el-table :data="this.left1List1" style="width: 100%;" height="200" ref="table"
                @mouseenter.native="autoScroll(true)"
                @mouseleave.native="autoScroll">
        <el-table-column prop="typeName" label="告警类型" width="270" />
        <el-table-column prop="almEntCount" label="告警数" />
      </el-table>
    </div>
  </div>
import { tableAutoScroll } from '@/utils/autoScroll'
mounted() {
    setTimeout(() => {
      // 想要滚动就必须设置表格高度,这里设置的高度是100%,即跟父元素等高
      this.tableHeight = "100%"
      this.infinitScroll()
    }, 500)
}

methods: {
 /** 表格自动滚动 */
    infinitScroll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      tableAutoScroll(table)
    },
}

autoScroll.js 工具类

/** 表格自动滚动 */
export const tableAutoScroll = (table) => {
  // 拿到表格中承载数据的div元素
  const divData = table.bodyWrapper;
  divData.onmouseover = function () {
    clearInterval(t);
  }; //鼠标移入,停止滚动
  divData.onmouseout = function () {
    start();
  }; //鼠标移出,继续滚动

  // 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
  let t;
  start();
  function start() {
    // 数据少于表格高度停止滚动
    if (divData.clientHeight >= divData.scrollHeight) {
      return;
    }
    t = setInterval(() => {
      // 元素自增距离顶部1像素
      divData.scrollTop += 1;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if ( divData.clientHeight + divData.scrollTop == divData.scrollHeight ) {
        // 重置table距离顶部距离
        divData.scrollTop = 0;
      }
    }, 100);
  }
}

.leftTopEcharts1 {
  height: 100%;
  width: 100%;
  background-image: url('~@/assets/meilinScreen/qyscaqydjc/biankuang.png');
  background-size: cover;
  background-size: 100% 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.alarm-table {
  padding-left: 5%;
  padding-top: 3%;
  padding-right: 3%;
}
/*去除滚动的滚动条*/
::v-deep .el-table th.gutter{
  display: none;
  width:0
}
::v-deep.el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}
::v-deep .el-table__body{
  width: 100% !important;
}
::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: hidden;
}
/*去除滚动的滚动条*/

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

运动蓝牙耳机有什么推荐的?这几款非常值得入手!

运动不仅能够锻炼身体&#xff0c;还能调节情绪释放压力&#xff0c;每到周末均会去徒步或骑行&#xff0c;路途上少不了音乐的相伴&#xff0c;运动期间会佩戴耳机聆听音乐&#xff0c;边聆听喜欢的音乐或有声读物&#xff0c;边享受当下的美景。骨传导耳机可以说在多种耳机当…

每天一个电商API分享:获得淘宝商品快递费用 API

在电商行业中&#xff0c;快递费用是一项不容忽视的重要开支。随着电商行业的不断发展壮大&#xff0c;越来越多的消费者选择在线购物&#xff0c;这就增加了电商企业的订单量和物流压力。在这个过程中&#xff0c;快递费用起到了承载和运输商品的重要作用。 首先&#xff0c;…

easyUI框架学习

文章目录 一、前言二、引入使用easyUI 三、用法3.1 Dialog&#xff08;对话框窗口&#xff09;3.1.1 示例13.1.2 示例2 3.2 Layout&#xff08;布局&#xff09;3.2.1 示例1——通过标签创建布局3.2.2 示例2—— 创建嵌套布局 3.3 DateBox&#xff08;日期输入框&#xff09;3.…

【Spring框架】Bean作用域和生命周期

目录 Bean作用域设置Bean作用域生命周期⽣命周期演示 Bean作用域 Bean作用域指的是Bean在Spring容器中的某种行为(单例、原型…)。 Bean的6种作用域 singleton&#xff1a;单例作⽤域prototype&#xff1a;原型作⽤域&#xff08;多例作⽤域&#xff09;request&#xff1a;请…

Jenkins 配置maven和jdk

前提:服务器已经安装maven和jdk 一、在Jenkins中添加全局变量 系统管理–>系统配置–>全局属性–>环境变量 添加三个全局变量 JAVA_HOME、MAVEN_HOME、PATH 二、配置maven 系统管理–>全局工具配置–>maven–>新增 新增配置 三、配置JDK 在系统管…

node.js旅游景点分享网站【纯干货分享,免费领取源码03796】

node.js旅游景点分享网站 摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。旅游景点分享网站设计&#xff0c;主要的模块包括查看后台首页、轮播图&#xff08;轮播图管理&#xff09;、网站公告…

QSlider 样式 Qt15.15.2 圆形滑块

在看文档的时候测试了一下demo&#xff0c;然后发现了一个有意思的东西&#xff0c;自定义滑块为带边框的圆形。 在设置的时候边框总是和预期的有点误差&#xff0c;后来发现了这样一个计算方式可以画一个比较标准的圆。&#xff08;ABCDEF在下方代码块内&#xff09; 滑块的…

自定义信号槽机制

自定义信号槽机制 自定义信号自定义槽自定义信号和槽函数的使用解决办法 如果想要在QT类中自定义信号槽, 需要满足一些条件, 并且有些事项也需要注意: 要编写新的类并且让其继承Qt的某些标准类这个新的子类必须从QObject类或者是QObject子类进行派生在定义类的头文件中加入 Q_…

linux上适用的反汇编调试软件(对标od)

ubuntu下类似于od软件 经过搜索&#xff0c;在Ubuntu上选用edb-debugger进行动态调试&#xff0c; 下载链接: https://github.com/eteran/edb-debugger 但是依赖反汇编引擎: https://github.com/capstone-engine/capstone 安装 先安装capstone 先下载release的版本&#xf…

有类型地址

有类型地址 子网号&#xff1a;基于网络号上划分。 A&#xff0c;B&#xff0c;C&#xff0c;D&#xff0c;E 类地址开头不同&#xff0c;是为了让网络不重叠。 A 类型 0 开头 网络号&#xff1a;8 位&#xff08;1 个字节&#xff09;。 主机号&#xff1a;24 位&#xff0…

windows环境下adb 下载和配置,连接手机。

ADB下载地址&#xff1a; https://adbdownload.com/ 选择下载windows系统的。 下载后解压&#xff0c;查看adb.exe所在的目录&#xff0c;如下 这里将路径复制下来&#xff1a;D:\ADB 配置到系统环境变量中。 然后再打开cmd&#xff0c;输入adb version查看版本。 出现…

Centos7.9 离线部署ChatGLM-6B

ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT4 量化级别下最低只需 6GB 显存&#xff09;。ChatG…

【stable diffusion】保姆级入门课程06-Stable diffusion(SD)图生图-上传蒙版及批量处理的用法

目录 0.本章素材 1.什么是上传蒙版 1.1.注意点 1.2.提示词部份 2.批量处理 3.涂鸦、局部重绘、涂鸦蒙版、上传蒙版 4.结语 0.本章素材 案例图链接&#xff1a;https://pan.quark.cn/s/3a64e682e311 案例图蒙版链接&#xff1a;https://pan.quark.cn/s/075f889af9c0 1.什…

了解Unity编辑器 之组件篇Effects(十一)

一、Halo&#xff1a;是一个可用于游戏对象的特效组件&#xff0c;它可以在对象周围添加一个光晕效果 Color属性: 用于设置Halo的颜色。你可以通过选择颜色面板中的颜色来指定光晕的外观。选择适当的颜色可以使光晕与游戏场景中的其他元素相匹配或突出显示。 Size属性: 用于设…

Kubernetes 之CNI 网络插件大对比

介绍 网络架构是Kubernetes中较为复杂、让很多用户头疼的方面之一。Kubernetes网络模型本身对某些特定的网络功能有一定要求&#xff0c;但在实现方面也具有一定的灵活性。因此&#xff0c;业界已有不少不同的网络方案&#xff0c;来满足特定的环境和要求。 CNI意为容器网络接…

华为数通HCIP-MPLS

传统ip转发 路由器根据流量的dip查找路由表进行转发&#xff1b; 缺陷&#xff1a;查找路由表需要消耗一定CPU开销&#xff1b;&#xff08;可以通过FIB表解决&#xff09; 安全性低&#xff0c;中间转发设备可以看到网络层ip信息&#xff1b; FIB(转发信息库&#xff09; 定…

Jmeter性能测试之正则表达式提取器

目录 前言 1. Jmeter正则表达式提取器 2. 入门实例 3. 进阶实例 前言 Jmeter正则表达式提取器属于Jmeter后置处理器&#xff08;post processors&#xff09;的一种&#xff0c;用于将取样器请求到的结果以正则表达式的方式读取出来。 1. Jmeter正则表达式提取器 1. 作用…

npm yarn nrm

npm 和 yarn npm和yarn都是包管理器&#xff0c;yarn是在2016年发布的&#xff0c;那时npm还处于V3时期&#xff0c;那时候还没有package-lock.json文件&#xff0c;不稳定性、安装速度慢等缺点经常会受到广大开发者吐槽。此时&#xff0c;yarn 诞生了。yarn 的优点&#xff0c…

iMessage 开发要点 坑点记录

pod 添加iMessage后&#xff0c;建议podfile要这样&#xff1a; platform :ios, 14.0def commonPod//这里写一些主应用和iMessage都要依赖的库pod "YYKit", ~> 1.0.9 endtarget MainApp doframeworksuse_frameworks!inhibit_all_warnings!# 多Target都有的podco…

【Lua学习笔记】Lua进阶——Require,三目运算

文章目录 Require短路判断实现三目运算符 Require 这是文件aaa.lua的内容 aaa.lua: a 10 local b 20 print("我是aaa")这是文件example.lua的内容 example.lua: a 100 print(a) require("aaa") --require调用其他脚本文件 print(a) print(b) print(&…