解决el-table有固定列且有合计行滚动条在固定列处不可选中问题

本文介绍了如何使用Vue的自定义指令解决el-table的滚动条问题,通过隐藏默认滚动条并添加自定义滚动条,配合resizeObserver监听元素变化,实现在表格有滚动需求时动态显示滚动条。

网上搜索的解决方案大都没什么卵用。这里用的vue自定义指令去解决,思路是隐藏自带的滚动条,增加一个自定义滚动条。

我们在指令文件夹directive下新建一个elTableScrollFixed.js文件存放自定义指令代码如下:

// 自定义滚动条方法
function setCustomScrolling(el,tableNode,summaryNode) {
  el.classList.add('custom-scrolling') // 追加一个自定义类,通过这个类在CSS中隐藏原先的滚动条.custom-scrolling .el-table__body-wrapper::-webkit-scrollbar{display: none}
  let bodyWidth = tableNode.offsetWidth + 'px' // 表格宽度
  let tableWidth = tableNode.querySelector('table').offsetWidth + 'px' // 表格内容宽度
  let sunmmaryHeight = summaryNode.offsetHeight?summaryNode.offsetHeight + 'px' : '37px' // 表尾合计行高度
  let removeVirtualNodes = el.querySelectorAll('.virtual-scrolling-box') // 防止重复插入,把已有的虚拟滚动条节点删除掉
  // 遍历这些节点并删除
  if(removeVirtualNodes.length>0){
    removeVirtualNodes.forEach((node)=> {
      if (node.parentNode) {
        node.parentNode.removeChild(node);
      }
    })
  }
  // 追加虚拟滚动条节点
  el.insertAdjacentHTML('beforeend',`<div class="virtual-scrolling-box" style="width: ${bodyWidth};height: 8px;overflow-x: auto;overflow-y: hidden;position: absolute;bottom: ${sunmmaryHeight};left: 0;z-index: 5">
          <p style="width: ${tableWidth};height: 8px;"></p>
          </div>`
  )
  let virtualScrollingBox = el.querySelector('.virtual-scrolling-box') // 获取追加的虚拟滚动条节点
  // 监听虚拟滚动条滚动
  el._virtualScrollingBox_ = virtualScrollingBox
  el._virtualScrollingEvent_ = []
  virtualScrollingBox.addEventListener('scroll', function virtualScrolling() {
    el._virtualScrollingEvent_.push(virtualScrolling) // 事件追加进去解绑时候销毁
    let scrollLeft = virtualScrollingBox.scrollLeft;
    tableNode.scrollLeft = scrollLeft // 滚动距离赋给表格节点
  })
}
export default {
  bind(el, binding, vnode){
    vnode.context.$nextTick(() => {
      let tableNode = el.querySelector('.el-table__body-wrapper.is-scrolling-left') // 表格节点
      let summaryNode = el.querySelector('.el-table__footer-wrapper') // 合计行节点
      // tableNode && summaryNode 成立则认为是有滚动条且有合计行
      if(tableNode && summaryNode){
        setCustomScrolling(el,tableNode,summaryNode) // 设置自定义滚动条
        // 监听元素变化
        const resizeObserver = new ResizeObserver((entries) => {
          tableNode = el.querySelector('.custom-scrolling .el-table__body-wrapper') // 重新获取表格节点
          setCustomScrolling(el,tableNode,summaryNode) // 设置自定义滚动条
        });
        resizeObserver.observe(el)
        // 赋值给el用做销毁
        el._resizeObserver_ = resizeObserver;
      }
    })
  },
  componentUpdated(el, binding, vnode){
    vnode.context.$nextTick(() => {
      vnode.context.$refs['table'].doLayout() // 调用组件上的方法
    });
  },
  unbind(el, binding, vnode){
    // 销毁元素监听
    if (el._resizeObserver_) {
      el._resizeObserver_.disconnect()
      delete el._resizeObserver_
    }
    // 移除滚动条上的监听事件
    if(el._virtualScrollingEvent_ && el._virtualScrollingEvent_.length>0){
      el._virtualScrollingEvent_.forEach(item=>{
        el._virtualScrollingBox_.removeEventListener('scroll', item);
      })
    }
  }
}

PS:尾部合计行高度37px以及滚动条的8px按自己需求更改。

隐藏自身滚动条

在全局css文件中增加如下样式,隐藏el-table自带的滚动条

.custom-scrolling{
  .el-table__body-wrapper::-webkit-scrollbar{display: none}
}
注册指令

在main.js中注册全局指令

import elTableScrollFixed from '@/directive/elTableScrollFixed.js'

Vue.directive('elTableScrollFixed', elTableScrollFixed)
使用指令

在el-table上使用自定义指令

<el-table v-el-table-scroll-fixed >...</el-table>
效果如下

<think>好的,我现在需要解决用户提到的element-ui中el-table设置右侧固定后横向滚动条被遮挡的问题。根据用户提供的引用内容,我需要综合这些信息来找到合适的解决方案。 首先,用户提到当只有固定时,可以通过设置固定的高度为auto,并调整bottom值等于滚动条的高度来解决遮挡问题。例如,引用[1]和[3]中提到的方案是修改.el-table__fixed-right的样式,设置height: auto和bottom: 15px或17px。这里需要注意滚动条的高度可能因浏览器而异,通常为15px到17px之间,所以可能需要根据实际情况调整这个值。 然后,当同时使用固定合计时,引用[2]和[4]指出可能会出现滚动条合计上方或被遮挡的情况。这时候除了调整固定的bottom值外,还需要处理z-index的问题。引用[2]中提到给.el-table__body-wrapper设置z-index: 2,这样可以让表格主体内容覆盖在固定之上,从而避免滚动条被遮挡。 接下来,我需要验证这些解决方案的有效性。例如,单独使用右侧固定时,应用方案1的CSS修改应该能让固定的高度自适应,底部留出滚动条的空间。而当同时有合计时,可能需要结合调整z-index来确保滚动条可见。 此外,引用[3]还提到修改两侧固定的高度为auto,并设置bottom值,这可能适用于左右固定的情况。用户的问题是关于右侧固定,所以可能需要具体应用在.el-table__fixed-right类上。 最后,用户可能需要测试不同的bottom值(如15px或17px)来适配不同的滚动条高度,或者使用动态计算的方式获取滚动条高度,以确保兼容性。同时,注意使用::v-deep或/deep/来穿透scoped样式,确保样式生效。 总结解决方案步骤:调整固定的高度和底部间距,必要时调整z-index以确保滚动条不被遮挡。需要根据是否使用合计来选择合适的组合方案。</think>### 解决方案 针对element-ui的el-table右侧固定遮挡横向滚动条问题,可通过以下两种方案解决(根据是否涉及合计选择对应方法): #### **方案1:仅存在固定时** 通过调整右侧固定的底部间距,避免遮挡滚动条: ```css /* 在全局或组件内样式添加(需穿透scoped) */ ::v-deep .el-table { .el-table__fixed-right { height: auto !important; /* 高度自适应 */ bottom: 15px !important; /* 滚动条高度(通常15-17px) */ } } ``` **原理**:固定默认高度为100%,覆盖了滚动条区域。通过设置`height: auto`让高度动态计算,再通过`bottom`属性留出滚动条空间[^1][^3][^4]。 --- #### **方案2:同时使用固定合计时** 若添加合计滚动条仍被遮挡或错位,需额外调整层级关系: ```css ::v-deep .el-table { .el-table__fixed-right { height: auto !important; bottom: 15px !important; } .el-table__body-wrapper { z-index: 2 !important; /* 提升主体内容层级 */ } } ``` **原理**:合计可能导致主体内容被固定覆盖,通过提升`.el-table__body-wrapper`的`z-index`让滚动条显示在最上层[^2]。 --- ### 注意事项 1. **滚动条高度适配**:不同浏览器滚动条高度可能不同,可尝试`15px`或`17px`调试。 2. **穿透语法**:若使用`scoped`样式,需用`::v-deep`或`/deep/`确保生效。 3. **错位问题**:若出现固定错位,检查父容器是否存在异常样式干扰。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值