u-table 加了合计后, 固定列的滚动条无法使用(umy-ui)延伸:iview Table 表格同上bug

文章讲述了在iviewTable中遇到的固定列滚动问题,通过调整CSS的pointer-events属性来实现滚动条的正常操作,包括覆盖默认行为和动态高度管理,以适应不同场景的需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

u-table -------------------------

问题描述

因为没有录屏,但是 根据图1和图2可以看出来,鼠标在非固定列位置是深色,在固定列位置是浅色,深色是可以左右滑动,浅色不能左右滑动。
图一

图二

解决办法

步骤1

在这里插入图片描述

.test_a /deep/ .el-table__fixed {
  pointer-events: none;
}
.test_a /deep/ .el-table__fixed-right {
  pointer-events: none; 
}

此时是成功了,可以滚动了,但是此时还有一个问题:固定列左侧和右侧,都不能点击了,如:点击编辑无效

步骤2
.test_a /deep/ .el-table__fixed-body-wrapper {
  pointer-events: auto;
}

到此,就解决了 !!
在这里插入图片描述
在这里插入图片描述

以下为辅助参考:
在这里插入图片描述

CSS中的’ pointer-events '属性决定了一个元素是否可以成为指针事件的目标。它可以有以下值:

  • 'auto ':元素正常运行。它可以是指针事件的目标。
  • 'none ':元素对指针事件完全透明。它不能是指针事件的目标。
  • 'visiblePainted ':元素是可见的,可以是指针事件的目标。
  • 'visibleFill ':元素的填充是可见的,可以作为指针事件的目标。
  • 'visibleStroke ':元素的笔画是可见的,可以作为指针事件的目标。
  • 'visible ':元素是可见的,并且可以作为指针事件的目标。
  • 'painted ':元素可以是指针事件的目标。
  • 'fill ':元素的fill值可以是指针事件的目标。
  • 'stroke ':元素的笔画可以是指针事件的目标。
  • 'all ':元素可以是指针事件的目标。

iview Table 固定后滚动条无法拖动 -------------------

情况1: 拉官网一个类似的例子,然后用上面的那种解决,也适合iview Table。
情况2:
下面的这个情况不适合,在组件里,且可能受别的组件样式影响,且是动态高度。
在这里插入图片描述

解决方向:不遮挡固定列处的滚动条
<div style="overflow-x: auto;" class="table-box">
   <Table :data="tableData" border :height="vHeight"></Table>
</div>
data () {
	vHeight: 100, // 动态高度,根据需求而定, 逻辑省略....
}
....
let cel = document.querySelector('.table-box')
if (cel && cel.querySelector('.ivu-table-fixed')) {
	cel.querySelector('.ivu-table-fixed').style.height = this.vHeight + 'px'
}

在这里插入图片描述
该方法 运用到 组件 类别时( fixed: right 的时候),有瑕疵:
当没有滚动条的时候,高度也被更改了,样式会不好看
在这里插入图片描述
== fixed: right 瑕疵解决:2024/1/17==

去除高度设置,改为监听class名,这样就算左右拉宽 拉窄 浏览器宽度,也不影响,都是自动计算了

if (cel && cel.querySelector(‘.ivu-table-fixed-right’)) {
cel.querySelector(‘.ivu-table-fixed-right’).style.height = (this.iMaxHeight+this.iAnotherHeight -13) + ‘px’
}

this.scrollHeightSet(cel, this.iMaxHeight, this.iAnotherHeight)

以下为 fixed: right 的例子,fixed: left 应该不会出现

scrollHeightSet (cel, iMaxHeight, iAnotherHeight) {
      // 目标元素
      var targetElement = document.querySelector(`.table-box_${this.name}`).querySelector(`.ivu-table-body`)
      // 创建一个MutationObserver实例,并指定回调函数
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          // 检查class名是否发生了变化
          if (mutation.attributeName === 'class') {
            // 处理class名变化的逻辑
            // console.log('Class名发生了变化:', targetElement.className.includes('ivu-table-overflowX'), targetElement.className);
            // 下面为 自己项目的逻辑
            if (targetElement.className.includes('ivu-table-overflowX')) {
              if (cel && cel.querySelector('.ivu-table-fixed-right')) {
                cel.querySelector('.ivu-table-fixed-right').style.height = (iMaxHeight+iAnotherHeight -13) + 'px'
              }
            } else {
              if (cel && cin.querySelector('.ivu-table-fixed-right')) {
                cel.querySelector('.ivu-table-fixed-right').style.height = (iMaxHeight+iAnotherHeight) + 'px'
              }
            }
          }
        });
      });
      // 配置MutationObserver,指定要观察的属性和类型
      var config = { attributes: true, attributeFilter: ['class'] };
      // 启动MutationObserver,并传入目标元素和配置
      observer.observe(targetElement, config);
    }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值