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

当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;
}
/*去除滚动的滚动条*/

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

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

相关文章

Mybatis学习笔记

Mybatis 文章目录 Mybatis搭建环境创建Maven工程将数据库中的表转换为对应的实体类配置文件核心配置文件mybatis-config.xml创建Mapper接口映射文件xxxMapper.xmllog4j日志功能 Mybatis操纵数据库示例及要点说明获取参数的两种方式${}#{} 各种类型的参数处理单个字面量参数多个…

keil官网下载MDK的STM32芯片pack包

背景 最近重装了电脑系统&#xff0c;重新安装了MDK所以导致MDK芯片包需要重新下载&#xff0c;软件内下载又太慢&#xff0c;所以趁现在找到了官网下载方法把方法分享出来供大家参考。 1、在浏览器中输入网址&#xff1a;www.keil.arm.com进入如下界面&#xff0c;然后点击&am…

Mock-MOCO使用过程

一、jar包下载&#xff1a;https://github.com/dreamhead/moco 二、准备mock的json文件 data.json内容&#xff1a; ####GET请求 [{"description": "response使用Content-Type为charsetGBK编码格式来查看返回信息为中文的内容","request": {&q…

Tensorflow预训练模型ckpt与pb两种文件类型的介绍

我们在 Tensorflow无人车使用移动端的SSD(单发多框检测)来识别物体及Graph的认识 熟悉了Graph计算图以及在 Tensorflow2.0中function(是1.0版本的Graph的推荐替代)的相关知识介绍 这个tf.function的用法&#xff0c;了解到控制流与计算图的各自作用&#xff0c;无论使用哪种方…

Linux基本指令操作

登陆指令&#xff08;云服务器版&#xff09; 当我们获取公网IP地址后&#xff0c;我们就可以打开xshell。 此时会有这样的界面&#xff0c;我们若是想的登陆&#xff0c;则需要输入以下的指令 ssh 用户名公网IP地址 然后会跳出以下的窗口 接着输入密码——密码便是先前定好…

利用小波包对一维信号进行降噪或压缩(MATLAB)

function [ output_args ] example4_12( input_args ) %EXAMPLE4_12 Summary of this function goes here % Detailed explanation goes here clc; clear; % 设置信噪比和随机数的初始值 snr 3; init 2055615866; % 生成一个原始信号xref和含高斯白噪声的信号x [xref,x] …

微服务契约测试框架-Pact

契约测试 契约测试的思想就是将原本的 Consumer 与 Provider 间同步的集成测试&#xff0c;通过契约进行解耦&#xff0c;变成 Consumer 与 Provider 端两个各自独立的、异步的单元测试。 契约测试的优点&#xff1a; 契约测试与单元测试以及其它测试之间没有重复&#xff0c…

零的奇幻漂移:解密数组中的神秘消失与重生

本篇博客会讲解力扣“283. 移动零”的解题思路&#xff0c;这是题目链接。 思路1 这道题目很有意思。虽然是简单题&#xff0c;其蕴含的玄机还是很多的。正常来讲&#xff0c;这种题目一般都会原地操作&#xff08;不开辟额外的数组&#xff0c;空间复杂度是O(1)&#xff09;&…

计算机组成原理(2)- 浮点数的存储

1、浮点数的表示方法 假设有以下小数&#xff0c;它表示的十进制数是多少呢&#xff1f; 00000000 00000000 00000000 1010.10101*2^3 1*2^1 1*2^-1 1*2^-3 10.625 1010.1010可以用科学计数法来表示为1.0101010 * 2^3。关于科学计数法再举个例子0.10101用科学计数法表示…

uni-app:模态框的实现(弹窗实现)

效果图 代码 标签 <template><view><!-- 按钮用于触发模态框的显示 --><button click"showModal true">显示模态框</button><!-- 模态框组件 --><view class"modal" v-if"showModal"><view cla…

网红项目AutoGPT源码内幕及综合案例实战(三)

AutoGPT on LangChain PromptGenerator等源码解析 本节阅读AutoGPT 的prompt_generator.py源代码,其中定义了一个PromptGenerator类和一个get_prompt函数,用于生成一个提示词信息。PromptGenerator类提供了添加约束、命令、资源和性能评估等内容的方法,_generate_numbered_l…

线性表之顺序表

在计算机科学中&#xff0c;数据结构是非常重要的基础知识之一。数据结构为我们提供了组织和管理数据的方法和技巧&#xff0c;使得我们可以高效地存储、检索和操作数据。而顺序表作为数据结构中最基本、最常用的一种存储结构&#xff0c;也是我们学习数据结构的第一步。 本文将…

QT: 完成服务器的实现

1> 思维导图 2> 手动完成服务器的实现&#xff0c;并具体程序要注释清楚 Widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务器类 #include <QTcpSocket> //客户端类 #include <QMessageBox> //…

jMeter使用随记

参数化BodyData 先制作参数文件 再设置一个csv data set config 最后在body data里面写上参数${xxxxx}

Stable diffusion 和 Midjourney 怎么选?

通过这段时间的摸索&#xff0c;我将和你探讨&#xff0c;对普通人来说&#xff0c;Stable diffusion 和 Midjourney 怎么选&#xff1f;最重要的是&#xff0c;学好影视后期制作对 AI 绘画创作有哪些帮助&#xff1f;反过来&#xff0c;AI 绘画对影视后期又有哪些帮助&#xf…

【docker】docker部署nginx

目录 一、步骤二、示例 一、步骤 1.搜索nginx镜像 2.拉取nginx镜像 3.创建容器 4.测试nginx 二、示例 1.搜索nginx镜像 docker search nginx2.拉取nginx镜像 docker pull nginx3.创建容器&#xff0c;设置端口映射、目录映射 # 在root目录下创建nginx目录用于存储nginx数据…

error:0308010C:digital envelope routines::unsupported(Vue2报错)

原因:node.js版本过高&#xff0c; 解决方案&#xff0c;在终端输入以下命令 set NODE_OPTIONS--openssl-legacy-provider 然后再package.json里面添加一行 "dev_t": "set NODE_OPTIONS\"--openssl-legacy-provider\" & npm run dev\n" 然后…

【Linux命令200例】用ln创建链接文件

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;本文已收录于专栏&#xff1a;Linux命令大全。 &#x1f3c6;本专栏我们会通过具体的系统的命令讲解加上鲜活的实操案例对各个命令进行深入…

windows 删除无法删除的文件

有两种原因&#xff1a; 文件被占用文件无权限 解决方案 通用解决方案是进入安全模式进行删除 安全模式&#xff1a; 不会启动非必要的进程有最高的系统权限 进入系统配置 安全引导&#xff0c;重启 删除文件 修改系统配置为正常启动 重启

[JavaWeb]SQL介绍-DDL语句

SQL介绍-DDL语句 一.SQL简介1.简介2.SQL通用语法3.SQL语言的分类 二.DDL-操作数据库与表1.DDL操作数据库2.DDL操作表①.查询表(Retrieve)②.创建表(Create)③.修改表(Update)④.删除表(Delete) 一.SQL简介 1.简介 SQL: Structured Query Language–结构化查询语言用来操作关系…