iview table 使用template iview的table加滚动条

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);
    }