element ui el-table表格纵向横向滚动条去除并隐藏空白占位列

news2024/11/18 11:47:47

需求

当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列和内容区右侧的空白
.el-table th.gutter{
  display: none;
  width:0
}
.el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}

.el-table__body{
  width: 100% !important;
}

效果

在这里插入图片描述

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

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

相关文章

068:mapboxGL绘制多边形,过滤获取选中的点的集合信息

第068个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中添加draw组件,绘制多边形,获取选中的点的集合信息。这里使用turf来判断点是否在多边形的范围内。通过filter方式,过滤掉未选中的点。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章…

对自动化测试的一些展望与理解

1. 需求和目标 在我开展自动化测试之前,其实该项目以前的测试人员也已经写了很多的接口测试用例,但是大多数用例处于“半瘫痪”状态,在CI上无人维护(听说起初是有人维护的,但是后来用例多了,维护的人每次花…

设计模式之门面模式

前言 什么是门面模式 门面模式是一种结构型设计模式,它提供了一个统一的接口,用来访问子系统中的一群接口。它定义了一个高层接口,让子系统更容易使用。这种模式常用于将一个复杂的子系统封装成一个简单的接口,使得客户端可以方…

如何使用navicat图形化工具远程连接MariaDB数据库【cpolar内网穿透】

公网远程连接MariaDB数据库【cpolar内网穿透】 文章目录 公网远程连接MariaDB数据库【cpolar内网穿透】1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射2.2 测试随机地址公网远程访问3. 配置固定TCP端口地址3.1 保留一个固定的…

记 : CTF2023羊城杯 - Reverse 方向 Blast 题目复现and学习记录

文章目录 前言题目分析and复习过程exp 前言 羊城杯题目复现: 第一题 知识点 :DES算法 : 链接:Ez加密器 第二题 知识点 :动态调试 : 链接:CSGO 这一题的查缺补漏: 虚假控制流的去除…

CVE-2021-44228 Apache log4j 远程命令执行漏洞

一、漏洞原理 log4j(log for java)是由Java编写的可靠、灵活的日志框架,是Apache旗下的一个开源项目,使用Log4j,我们更加方便的记录了日志信息,它不但能控制日志输出的目的地,也能控制日志输出的内容格式;…

算法通过村第十二关青铜挑战——不简单的字符串转换问题

大家好&#xff0c;我是怒码少年小码。 今天练习一道数据处理的题目&#xff0c;字符串->整数 int myAtoi(string s) {unsigned long len s.length();//去除前端空格int index 0;while(index < len ){if(s[index]! ){break;}index;}if(index len){return 0;}int sign…

VsCode配置C/C++环境、控制台中文乱码、中文包不生效、debug调试、cin无法输入

VsCode配置C/C环境 文章目录 VsCode配置C/C环境[toc]下载VScode下载编译器MinGW 并解压将MinGW添加至环境变量测试MingGW 环境变量配置成功安装插件重启 VSCODE 并创建编程文件测试 debug可能遇到的问题Chinese 中文包未生效外部控制台中文乱码cin 无法输入终端中文乱码 下载VS…

cmake练习一

需求&#xff1a; 1、利用CGAL库Boost库&#xff0c;写一个关于CGAL的程序 2、使用cmake构建 1、创建目录结构 src中有一个main.cpp&#xff0c;放的是我们的主程序代码 2、安装CGAL和Boost库 略 3、编写cmakelist.txt cmake_minimum_required(VERSION 3.1.0) project(cg…

MySQL:至少参与xxx参与的全部事件

MySQL&#xff1a;至少参与xxx参与的全部事件 – WhiteNights Site 标签&#xff1a;MySQL, 数据库 这玩意&#xff0c;期末要考&#xff0c;还是重点。所以不得不仔细思考思考怎么写了。 什么时候用NOT EXISTS 双重否定表肯定 之前虽然已经讲过了&#xff0c;不过那一篇文章…

Apache ActiveMQ RCE漏洞复现(CNVD-2023-69477)

0x01 产品简介 ActiveMQ是一个开源的消息代理和集成模式服务器&#xff0c;它支持Java消息服务(JMS) API。它是Apache Software Foundation下的一个项目&#xff0c;用于实现消息中间件&#xff0c;帮助不同的应用程序或系统之间进行通信。 0x02 漏洞概述 Apache ActiveMQ 中存…

Flink on yarn 加载失败plugins失效问题解决

Flink on yarn 加载失败plugins失效问题解决 flink版本&#xff1a;1.13.6 1. 问题 flink 任务运行在yarn集群,plugins加载失效,导致通过扩展资源获取任务参数失效 2. 问题定位 yarn容器的jar包及插件信息,jar包是正常上传 源码定位 加载plugins入口&#xff0c;TaskMana…

Go学习第十章——文件操作,Json和测试

Go文件操作&#xff0c;Json和测试 1 文件1.1 基本介绍1.2 读取的基本操作1.3 写入的基本操作1.4 使用案例(三个) 2 Go语言的Json使用2.1 序列化案例2.2 反序列化案例 3 单元测试3.1 先看个需求3.2 快速入门3.3 入门总结 1 文件 1.1 基本介绍 文件在程序中是以流的形式来操作…

Android环境变量macOS环境变量配置

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览macOS基础知识 三、设置环境变量3.1 终…

【iOS免越狱】利用IOS自动化web-driver-agent_appium-实现自动点击+滑动屏幕

1.目标 在做饭、锻炼等无法腾出双手的场景中&#xff0c;想刷刷抖音 刷抖音的时候有太多的广告 如何解决痛点 抖音自动播放下一个视频 iOS系统高版本无法 越狱 安装插件 2.操作环境 MAC一台&#xff0c;安装 Xcode iPhone一台&#xff0c;16 系统以上最佳 3.流程 下载最…

Android Studio 导出 jar

AS版本&#xff1a;Android Studio Giraffe | 2022.3.1 Patch 1 1、File——New Module——Android Library 2、mylibrary——main——新建功能类 3、mylibrary——build.gradle——android {}内复制以下代码——Sync Now //Copy类型 tasks.register(makeJar, Copy) { //删…

Python深度学习实战-基于tensorflow原生代码搭建BP神经网络实现分类任务(附源码和实现效果)

实现功能 前面两篇文章分别介绍了两种搭建神经网络模型的方法&#xff0c;一种是基于tensorflow的keras框架&#xff0c;另一种是继承父类自定义class类&#xff0c;本篇文章将编写原生代码搭建BP神经网络。 实现代码 import tensorflow as tf from sklearn.datasets import…

[推荐]Linux安装与配置虚拟机之虚拟机服务器坏境配置

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《Spring与Mybatis集成整合》《Vue.js使用》 ⛺️ 越努力 &#xff0c;越幸运。 一.操作系统 1. 简介 操作系统&#xff08;perating System&#xff0c;简称OS&#xff09;是一种系统软件…

测试C#调用Vlc.DotNet组件播放视频

除了Windows Media Player组件&#xff0c;在百度上搜索到还有不少文章介绍采用Vlc.DotNet组件播放视频&#xff0c;关于Vlc.DotNet的详细介绍见参考文献1&#xff0c;本文学习Vlc.DotNet的基本用法。   VS2022中新建基于.net core的winform程序&#xff0c;在Nuget包管理器中…

Qt+JSON简单例子

QtJSON简单例子 QtJSONexample2参考 QtJSON #include "mainwindow.h" #include "ui_mainwindow.h" #include <QtDebug> #include <QJsonObject> #include <QJsonArray> #include <QJsonDocument> #include <QTextCodec> #i…