eltable el-table 横向 滚动条常显

news2025/1/9 14:56:57

又遇到了难受的问题,el-table嵌入在一个div里面,结果因为内容太多,横向、纵向我都得滚动查看!

结果发现横向滚动时只能让它纵向触底后才能进行横向操作,这就很变态,明显不符合用户操作习惯。如下图:

要先纵向触底再进行横向操作,这。。。。客户肯定会骂我的。。。 

 下面进行尝试解决,基本布局代码如下:

 <div class="right-view">
       <el-table :data="tableData" class="right-table">
           <el-table-column v-for="(item, bindex) in labelList" :min-width="item.width" :key="bindex"
                        :prop="item.prop" :label="item.label" header-align="center" align="center"></el-table-column>
       </el-table>
 </div>
.right-view {
    position: relative;
    width: calc(100% - 220px);
    height: 100%;
    margin-left: 10px;

    display: flex;
    flex-direction: column;
}
.right-table {
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: visible;
}

修改默认样式如下:这里减40的目的是将eltable的header高度减掉,控制它的可视区域,让横向滚动条常显在底部。

::v-deep {
    .el-table__body-wrapper {
        height: calc(100% - 40px);
        overflow-y: auto;
    }
}

解决后看效果:

 

这样横向、纵向操作就没问题了,互不影响。 

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

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

相关文章

《C++ Primer Plus》学习笔记|第8章 函数探幽 (24-11-30更新)

文章目录 8.1 内联函数8.2 引用变量8.2.1 创建引用变量8.2.2 将引用用作函数参数8.2.3 引用的属性和特别之处特点1&#xff1a;在计算过程中&#xff0c;传入的形参的值也被改变了。特点2&#xff1a;使用引用的函数参数只接受变量&#xff0c;而不接受变量与数值的运算左值引用…

在 Mac ARM 架构(例如 M1 或 M2 芯片)上安装 Node.js

文章目录 方法一&#xff1a;使用 Homebrew 安装 Node.js方法二&#xff1a;使用 Node Version Manager (NVM) 安装 Node.js方法三&#xff1a;从 Node.js 官方网站下载安装包注意事项 在 Mac ARM 架构&#xff08;例如 M1 或 M2 芯片&#xff09;上安装 Node.js 可以通过几种不…

电脑提示报错“Directx error”怎么解决?是什么原因导致的?游戏软件提示“Directx error”错误的解决方案

DirectX Error&#xff08;DX错误&#xff09;通常指的是在使用基于DirectX技术的应用程序&#xff08;尤其是游戏&#xff09;时遇到的问题。这个问题可能由多种因素导致&#xff0c;以下是一些可能的原因及相应的解决方案&#xff1a; 可能的原因 DirectX版本不匹配&#x…

JAVA:Spring Boot 3 实现 Gzip 压缩优化的技术指南

1、简述 随着 Web 应用的用户量和数据量增加&#xff0c;网络带宽和页面加载速度逐渐成为瓶颈。为了减少数据传输量&#xff0c;提高用户体验&#xff0c;我们可以使用 Gzip 压缩 HTTP 响应。本文将介绍如何在 Spring Boot 3 中实现 Gzip 压缩优化。 2、配置 Spring Boot 3 对…

哈希表,哈希桶的实现

哈希概念 顺序结构以及平衡树中&#xff0c;元素关键码与其存储位置之间没有对应的关系&#xff0c;因此在查找一个元素 时&#xff0c;必须要经过关键码的多次比较。顺序查找时间复杂度为O(N)&#xff0c;平衡树中为树的高度&#xff0c;即 O(logN)&#xff0c;搜索的效率取决…

从 EXCEL 小白到 EXCEL 高手的成长之路

在职场与日常生活中&#xff0c;Excel 作为一款强大的数据处理与分析工具&#xff0c;扮演着不可或缺的角色。无论是初学者还是资深职场人士&#xff0c;掌握 Excel 技能都能极大地提高工作效率。那么&#xff0c;从一个 Excel 小白蜕变成为 Excel 高手&#xff0c;究竟需要多久…

TiDB 无统计信息时执行计划如何生成

作者&#xff1a; weiyinghua 原文来源&#xff1a; https://tidb.net/blog/4c49ac0d 一、Pseudo 统计信息总体生成规则 TiDB 在表无统计信息时&#xff0c;不会进行动态采样&#xff0c;而是用静态的、预设规则以及经验假设来生成计划。用函数 PseudoTable 创建一个伪统…

org.apache.commons.lang3包下的StringUtils工具类的使用

前言 相信平时在写项目的时候&#xff0c;一定使用到StringUtils.isEmpty()&#xff1b;StringUtils.isBlank();但是你真的了解他们吗&#xff1f; 也许你两个都不知道&#xff0c;也许你除了isEmpty/isNotEmpty/isNotBlank/isBlank外&#xff0c;并不知道还有isAnyEmpty/isNon…

【工具推荐】dnsx——一个快速、多用途的 DNS 查询工具

basic/基本使用方式 echo baidu.com | dnsx -recon # 查询域名所有记录echo baidu.com | dnsx -a -resp # 查询域名的a记录echo baidu.com | dnsx -txt -resp # 查询域名的TXT记录echo ip | dnsx -ptr -resp # ip反查域名 A记录查询 TXT记录查询 ip反查域名 help/帮助信息 输…

Hive高可用配置

在hive的商用上没有集群一说&#xff0c;而且它本身也不是数据库&#xff0c;只是hadoop的数据sql化工具&#xff0c;但是hive可以配置高可用&#xff0c;通常业内对元数据服务会开5个&#xff0c;而HS2服务开3个&#xff0c;来保证hive服务的高可用 配置方式也很简单&#xf…

使用数学方法实现K-Nearest Neighbors(KNN)算法

目录 ​编辑 引言 KNN算法的数学基础 1. 距离度量 欧氏距离 曼哈顿距离 2. 寻找最近邻 3. 决策规则 分类 回归 4. 权重 KNN算法的实现步骤 1. 参数选择 2. 实现 导入必要的库 加载数据集 划分训练集和测试集 创建KNN模型 训练模型 预测测试集 计算准确率 …

提升用户体验、创新产品与高效运营,企业发展三驾马车

​在当今竞争激烈的市场环境中&#xff0c;企业要想脱颖而出并持续发展&#xff0c;需同时在提升用户体验、推动产品创新以及实现内部高效运营方面下功夫。 提升用户体验至关重要。它能提高用户满意度和忠诚度&#xff0c;增加用户口碑与推荐&#xff0c;提升企业品牌形象。可通…

在 Mac(ARM 架构)上安装 JDK 8 环境

文章目录 步骤 1&#xff1a;检查系统版本步骤 2&#xff1a;下载支持 ARM 的 JDK 8步骤 3&#xff1a;安装 JDK步骤 4&#xff1a;配置环境变量步骤 5&#xff1a;验证安装步骤 6&#xff1a;注意事项步骤7&#xff1a;查看Java的安装路径 在 Mac&#xff08;ARM 架构&#xf…

【Redis】—0.1、Ubuntu20.04源码编译部署redis6.2.7

1、Redis下载 创建redis的目录&#xff1a;mkdir -p /data/db/redis 下载redis&#xff1a;https://redis.io/download/ 2、上传文件到目录后解压 tar xvf redis-6.2.7.tar.gz 3、安装redis的依赖软件更新gcc&#xff0c;装一系列软件包&#xff0c;gcc&#xff0c;g和make。 s…

redis都有哪些用法

1. 缓存&#xff08;Caching&#xff09;&#xff1a; • Redis常被用作缓存层&#xff0c;存储那些频繁访问但更新不频繁的数据&#xff0c;以减少数据库的访问压力&#xff0c;提高数据读取速度。 • LRU&#xff08;Least Recently Used&#xff09;淘汰策略&#xff1a;Red…

npm install -g@vue/cli报错解决:npm error code ENOENT npm error syscall open

这里写目录标题 报错信息1解决方案 报错信息2解决方案 报错信息1 使用npm install -gvue/cli时&#xff0c;发生报错&#xff0c;报错图片如下&#xff1a; 根据报错信息可以知道&#xff0c;缺少package.json文件。 解决方案 缺什么补什么&#xff0c;这里我们使用命令npm…

爬取boss直聘上海市人工智能招聘信息+LDA主题建模

爬取boss直聘上海市人工智能招聘信息 import time import tqdm import random import requests import json import pandas as pd import os from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriv…

【STM32+HAL】FreeRTOS学习小札

一、RTOS程序任务结构 如上图所示&#xff0c;在实时操作系统中&#xff0c;开发人员可以把要实现的功能划分为多个任务&#xff0c;每个任务负责实现其中的一部分&#xff0c;每个任务都是一个很简单的程序&#xff0c;通常是一个死循环。 二、多任务系统基本概念 1、FreeRTO…

路径规划之启发式算法之二:遗传算法(Genetic Algorithm)

遗传算法&#xff08;Genetic Algorithm, GA&#xff09;是一种基于自然选择和遗传学原理的优化搜索算法&#xff0c;它通过模拟自然界的进化过程来寻找最优解。 一、基本原理 遗传算法的基本原理是模拟自然选择、遗传和突变等生物进化过程。它通过将问题的求解过程转换成类似…

【ubuntu24.04】GTX4700 配置安装cuda

筛选显卡驱动显卡驱动 NVIDIA-Linux-x86_64-550.135.run 而后重启:最新的是12.6 用于ubuntu24.04 ,但是我的4700的显卡驱动要求12.4 cuda