首页 > 其他分享 >Element 表格固定列横向滚动条无法拖动的问题解决

Element 表格固定列横向滚动条无法拖动的问题解决

时间:2023-05-24 15:44:35浏览次数:43  
标签:__ el 拖动 wrapper Element 滚动条 table

在Element-UI中,当对表格列进行固定后,底部的横向滚动条就无法拖动了,主要的问题就是固定区域盖住了横向滚动条。

方案一:修改el-table__body-wrapper样式的层级,随便设个层级就可

::v-deep .el-table__body-wrapper{
       z-index: 2
}

//加了fixed之后失效
::v-deep .el-table__fixed-footer-wrapper tbody td.custom-cell{
	border-right: 1px solid #DBDFE5 !important;
}

效果:解决滚动条被遮住的问题,同时含有合计也适用,缺点:就是表头和合计那部分有阴影,中间的部分没有阴影,不过不影响效果,问题不大。

方案二:将固定区域底部留出一个滚动条高度的距离。

.el-table .el-table__fixed {
    height:auto !important; 
    bottom: 16px !important;
	&::before {
		background-color: transparent;
	}
}

效果:就是设置bottom值,使得不盖住滚动条。缺点:不适用与含有合计的table,如果含有合计,合计也会上移。
需要注意的是,上面的代码需要放在全局的样式文件中才有效果。

标签:__,el,拖动,wrapper,Element,滚动条,table
From: https://www.cnblogs.com/tn666/p/17428512.html

相关文章

  • [React Typescript] useRef with HTML Elements
    Reactsetthereftonullinruntime.Itisalimitationnowforreact.import{useRef}from'react';exportconstComponent=()=>{constref=useRef<HTMLDivElement>(null);return<divref={ref}/>;}; ......
  • WPF实现两个DataGrid列表的滚动条同步
    实现目标:左右两个DataGrid对比显示,希望拖动一个列表的滚动条,就把别一个列表的滚动条移动到相应位置。 主要思路是:通过FindVisualChildren找到两个DataGrid的ScrollViewer控件,然后注册两个控件的ScrollChanged事件,只要有一个ScrollViewer的VerticalOffset值变了,就相应地修改另......
  • element-plus 组件样式修改
    el-form-item间距.el-form-item{margin-bottom:3px;}Elmessage消息换行/*失败消息*/.el-message--error{white-space:pre-line}/*成功消息*/.el-message--success{white-space:pre-line}......
  • vueh5实现双指操作图片或者内容放大缩小拖动 (hammerjs插件)
    可在mounted钩子直接使用通过使用Hammer.js库来实现手势操作,包括缩放、拖动和双击重置功能1.在模板中添加了一个<div>元素,并为其设置了ref属性,以便在代码中引用该元素。2.在mounted生命周期钩子函数中,通过this.$refs.main获取之前设置的<div>元素。3.创建了一个新的Hammer实例,传入......
  • 【element-plus】Table表格横向滚动条显示不正确解决办法
    滚动条bug展示如下:造成bug原因排查:由于对Table表格进行了二次封装,传递props属性时,传递了align属性,代码实现如下图:解决办法删除align属性,滚动条样式正常回显在二次封装组件时,需要保证组件属性的输入和透出,尽量避免不必要的bug......
  • Failed to execute 'setSelectionRange' on 'HTMLInputElement'
    jcubic commented on7Jan2016WhenIusenumberinputI'vegoterrorinGoogleChromeUncaughtInvalidStateError:Failedtoexecute'setSelectionRange'on'HTMLInputElement':Theinputelement'stype('number')......
  • 【Element-UI】时间/日期选择器选择禁用当前之前(之后)时间
    01.日期选择<template><div><el-date-pickerformat="yyyy-MM-dd"value-format="yyyy-MM-dd"type="date"placeholder="请选择日期"v-model="dayDate":pic......
  • Revit二次开发实战04(元素搜集过滤器FilteredElementCollector)
    Revit二次开发实战 FilteredElementCollector元素搜集过滤器1、创建搜集器FilteredElementCollector(Document);搜集文档中所有元素;FilteredElementCollector(Document,List<ElementId>);在指定id集合中搜集;FilteredElementCollector(Document,ElementIdviewId);在......
  • 实现 React 简易版 createElement 和 render 方法
    前言在React中,我们都知道可以写jsx代码会被编译成真正的DOM插入到要显示的页面上。这具体是怎么实现的,今天我们就自己动手做一下。实现createElement方法这个方法平时开发我们并不会用到,因为它是经babel编译后的代码,我们新建一个React项目,index.js最简单的代码结构如......
  • css解决浏览器滚动条出现时页面宽度会缩窄页面抖动
    css解决浏览器滚动条出现时页面宽度会缩窄页面抖动解决方式如下方式一html{overflow-y:scroll;}总是显示滚动条,体验不好方式二html{overflow-y:overlay;}兼容性一般方式三html{margin-right:calc(100%-100vw);}方式四html{padding-......