el-table实现固定列,及解决固定列导致部分滚动条无法拖动的问题

一、el-table实现固定列

当数据量动态变化时,可以为 Table 设置一个最大高度。

通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度,则会显示一个滚动条。

<div class="zn-filter-table"><!-- 表格--><el-table class="table-box" ref="table" :data="tableData" style="width: 100%;" max-height="580" border stripe @selection-change="handleSelectionChange":header-cell-style="{'text-align':'center',}"><el-table-column type="selection" width="55" align="center" v-if="multiple"></el-        table-column><el-table-column>XXXX</el-table-column><el-table-column label="操作" align="center" width="150" class="table-fixed-right" fixed="right"><template slot-scope="scope"><el-button size="mini" type="text" @click="handleSelect(scope.row)">详情</el-button><!-- <el-button size="mini" type="text" @click="handleDelete(scope.row)" class="mpc_del">删除</el-button> --><el-dropdown size="small" type="primary" trigger="hover" style="margin-left: 10px;"><span style="color: #1890FF;font-size: 12px;">更多</span><el-dropdown-menu slot="dropdown"><div v-for="item in buttons" :key="item.value"><el-dropdown-item v-if="item.value === 'del'" @click.native="handleDelete(scope.row)" class="mpc_del" v-hasPermi="item.hasPermi">{{item.label}}</el-dropdown-item><el-dropdown-item v-else @click.native="handleUpdate(scope.row,item.value)" style="font-size: 12px;color: #1890FF;" v-hasPermi="item.hasPermi">{{item.label}}</el-dropdown-item></div></el-dropdown-menu></el-dropdown></template></el-table-column></table>

fixed属性:列是否固定在左侧或者右侧,true 表示固定在左侧;可选值:true, left, right

二、同用样式配置

框架之间引用过来的组件会和elementUi中的组件存在差异,因此需要一些通用样式,样式修改如下:

<style>.zn-filter-table {/* border: 1px solid blue; */}.zn-filter-table .el-table-column--selection .cell {padding-right: 10px !important;}.zn-filter-table .el-table__fixed-body-wrapper .el-table__body {/* 这个得自己调试看多少合适 */padding-bottom: 20px;}/* 固定列高度与表格高度不一致 */.zn-filter-table .el-table__fixed,.zn-filter-table .el-table__fixed-right {height: calc(100% - 33px) !important;/* height: 100% !important; */right: 0 !important;/* 这个得自己调试看多少合适 */bottom: 20px !important;}.zn-filter-table .el-table__fixed::before,.zn-filter-table .el-table__fixed-right::before {background: transparent !important;/* 去掉固定列下方的横线, 样式优化 */display: none;}.table-fixed-right {}
</style>

三、解决 el-table 固定列 el-table__fixed 导致部分滚动条无法拖动的问题

当给 el-table 表格的列添加了 fixed 属性之后,我们可以发现,被固定的部分虽然鼠标悬浮时会显示滚动条,但却无法拖动,通过修改表格固定列的高度,使固定列无法遮住滚动条,即可实现无障碍拖动。

 

 四、滚动条样式设置

<style scoped>/* // 滚动条样式 */
/* // 胶囊背景色 */
::v-deep .el-table__body-wrapper::-webkit-srollbar-track {background-color: rgba(255, 255, 255, 0);
}
/* //可设置胶囊宽高 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {height: 12px;opacity: 0.5;
}
/* 设置胶囊色 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {border-radius: 15px;background-color: #cdd9e6;
}
</style>

五、动态修改el-table表格滚动条,控制表格高度

1.在el-table中添加动态高度

:max-height="tableHeight" 

2.定义动态高度变量

3.写动态高度方法

created() {this.tableHeight = window.innerHeight - 346},

 4.监听窗口发生变化时表格高度动态变化

mounted() {this.handleTableHeight();},methods: {handleTableHeight: function () {var _this = this;window.onresize = () => {_this.tableHeight = window.innerHeight - 346};},}

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

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

相关文章

AI对于高考和IT行业的深远影响

目录 AI对IT行业的冲击及深远影响1. 工作自动化2. 新的就业机会3. 行业融合4. 技术升级和创新5. 数据的重要性 IT行业的冬天要持续多久&#xff1f;大学的软件开发类专业是否还值得报考&#xff1f;其他问题IT行业是否都是加班严重&#xff1f;35岁后就业困难是否普遍现象&…

基于TCP的在线词典系统(分阶段实现)

1.功能说明 一共四个功能&#xff1a; 注册 登录 查询单词 查询历史记录 单词和解释保存在文件中&#xff0c;单词和解释只占一行, 一行最多300个字节&#xff0c;单词和解释之间至少有一个空格。 2.功能演示 3、分阶段完成各个功能 3.1 完成服务器和客户端的连接 servic…

springcloud-alibba之FeignClient

代码地址&#xff1a;springcloud系列: springcloud 组件分析拆解 1.FeignClient的集成 springboot版本&#xff1a;3.1.5 springcloud组件版本&#xff1a;2022.0.4 nacos客户端的版本&#xff1a;2.3.2 1.引pom 这里引入了nacos和feginclient的版本 <dependency>…

【MySQL】事务四大特性以及实现原理

事务四大特性 原子性&#xff08;Atomicity&#xff09; 事务中的所有操作要么全部完成&#xff0c;要么全部不执行。如果事务中的任何一步失败&#xff0c;整个事务都会被回滚&#xff0c;以保持数据的完整性。 一致性&#xff08;Consistency&#xff09; 事务应确保数据库…

机器学习——决策树及其可视化

1、决策树概念 顾名思义&#xff0c;决策树是利用数据结构中树结构来进行判断&#xff0c;每一个结点相当于一个判断条件&#xff0c;叶子结点即是最终的类别。以鸢尾花为例&#xff0c;可以得到如下的决策树&#xff1a; 2、决策树分类的依据是什么&#xff1f; 根据前面分…

跨越语言的界限:Vue I18n 国际化指南

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热爱技术和分享&#xff0c;欢迎大家交流&#xff0c;一起学习进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 国际化简介 vue-i18n 安装和配置 创建语言包 基本使用 切换语言 动态翻…

CTFShow的RE题(二)

逆向5 附件无后缀&#xff0c;查一下是zip&#xff0c;解压得到一个exe一个dll文件。 往下继续看 但也根进去看看 发现是在加载的dll文件 还有一个返回时调用的函数 发现是打印函数 根据以往的经验应该是要跳转到这里&#xff0c;动调一下。 发现exe链接了dll&#xff0c;…

Lock4j简单的支持不同方案的高性能分布式锁实现及源码解析

文章目录 1.Lock4j是什么?1.1简介1.2项目地址1.3 我之前手写的分布式锁和限流的实现 2.特性3.如何使用3.1引入相关依赖3.2 配置redis或zookeeper3.3 使用方式3.3.1 注解式自动式3.3.2 手动式 4.源码解析4.1项目目录4.2实现思路 5.总结 1.Lock4j是什么? 1.1简介 lock4j是苞米…

昇思第6天

函数式自动微分 神经网络的训练主要使用反向传播算法&#xff0c;模型预测值&#xff08;logits&#xff09;与正确标签&#xff08;label&#xff09;送入损失函数&#xff08;loss function&#xff09;获得loss&#xff0c;然后进行反向传播计算&#xff0c;求得梯度&#…

【算法专题】双指针算法

1. 移动零 题目分析 对于这类数组分块的问题&#xff0c;我们应该首先想到用双指针的思路来进行处理&#xff0c;因为数组可以通过下标进行访问&#xff0c;所以说我们不用真的定义指针&#xff0c;用下标即可。比如本题就要求将数组划分为零区域和非零区域&#xff0c;我们不…

时序分析基本概念介绍——SI/crosstalk/delta delay/noise/timing Window

文章目录 前言一、Crosstalk1. Crosstalk Delay Effects2. Crosstalk Noise Effects 二、Crosstalk Analysis1. Crosstalk Delay Analysis2. Crosstalk Noise Analysis 三、如何 fix delta delay 和 noise violations1. 检查delta delay 和 noisedelta delay checknoise check …

【C语言小知识】缓冲区

缓冲区 当我们使用printf()将数据显示在屏幕上&#xff0c;或者使用scanf()函数将数据输入到电脑里&#xff0c;我们是否会产生些许疑问&#xff1f;为何输入的字符会直接显示到屏幕上等等。这里需要介绍一个C语言中的一个关键概念——缓冲区。 当我们使用老式系统进行运行代码…

suricata7 rule加载(一)加载 action

suricata7.0.5 一、前提条件 1.1 关键字注册 main | --> SuricataMain|--> PostConfLoadedSetup|--> SigTableSetupsigmatch_table是一个全局数组&#xff0c;每个元素就是一个关键字节点&#xff0c;是对关键字如何处理等相关回调函数。非常重要的一个结构&#x…

PyCharm如何安装requirements.txt中的依赖包

问题&#xff1a;下载别人的源码&#xff0c;如何安装代码中requirement.txt中的依赖包。 解决方案&#xff1a; &#xff08;1&#xff09;打开PyCharm下面的Terminal&#xff0c;先为代码创建单独的虚拟环境并进入到虚拟环境中&#xff08;每个项目单独的环境&#xff0c;这…

GlusterFS分布式存储系统

GlusterFS分布式存储系统 一&#xff0c;分布式文件系统理论基础 1.1 分布式文件系统出现 计算机通过文件系统管理&#xff0c;存储数据&#xff0c;而现在数据信息爆炸的时代中人们可以获取的数据成指数倍的增长&#xff0c;单纯通过增加硬盘个数来扩展计算机文件系统的存储…

Docker搭建MySQL双主复制详细教程

在此之前需要提前安装好Docker和 Docker Compose 。 一、创建目录 首先创建一个本地数据挂载目录。 mkdir -p master1-data master2-data二、编写docker-compose.yml version: 3.7services:mysql-master1:image: mysql:5.7.36container_name: mysql-master1environment:MYSQL_…

VBA初学:零件成本统计之四(汇总计算)

第四步&#xff0c;最后进行汇总计算 汇总统计的计算 Sub count() Dim rng As Range Dim i As Long, j As Long Dim arr_s, arr, brr, crr, drr Dim rowscount As Long Dim X As Variant Dim rg As Single, xb As Single, zj As SingleMsgBox "汇总计算时间较久&#xff…

【HTML入门】第二课 - head标签下的常见标签们

目录 1 本节概要 2 head下的常见标签 2.1 网页编码设置 2.2 网页的标题 2.3 样式标签 3 head标签的内容不会显示到网页上 4 查看网页源代码 1 本节概要 上一节&#xff0c;我们说了HTML网页最基本的框架标签&#xff0c;说到标签分为head头部和body身体部分。这一小节呢…

Windows Server 2016 搭建 网络负载平衡 服务

网络负载平衡功能的安装 添加角色 默认不动————功能 勾选上 < 网络负载平衡 > 在工具中————打开 < 网络负载平衡管理器 > 网络负载平衡群集创建 注意 : 提前 将两台 web 站点服务器 都安装好 < 网络负载平衡功能 > 右键 选择 ————新建群集 ——…

【学习笔记】爱立信SPO 1400 CRAFT软件基础知识6——配置的备份与恢复的详细方法

一、前期准备 提示&#xff1a;下面所有学习内容都是基于以下条件完成的 条件1.已经正确安装并正常运行SPO 1400 CRAFT软件&#xff08;以下简称LCT&#xff09; 条件2.确认已正确使用爱立信SPO 1400 CRAFT软件通过网络登录设备&#xff08;以下简称NE&#xff09; 具体登录…