解决办法:给 .ant-table-body 设置 overflow: overlay !important;

.ant-table-body {
  overflow-y: auto !important;
  overflow: overlay !important; //谷歌
}

在这里插入图片描述

兼容火狐浏览器

css样式(也许可以不需要,自己测试)

// 解决火狐浏览器table左侧fixed后,行之间不齐 start
@-moz-document url-prefix() {
  .ant-table-fixed-left .ant-table-body-inner {
    padding-right: 0 !important;
    margin-right: 0 !important;
    width: calc(100% + 7px);
    scrollbar-color: #fff #fff;
    scrollbar-width: thin;
  }
  body .table-wrapper .ant-table-fixed-left .ant-table-body-outer {
    margin-bottom: -8px !important;
  }
}
// 解决火狐浏览器table左侧fixed后,行之间不齐 end

js监听是否有滚动条

  mounted() {
    window.addEventListener('scroll', this.handleScroll1, true)
    window.addEventListener('resize', this.resizeEvent, false)
  },
  methods: {
    // 监听滚轮事件
    handleScroll1() {
      if (!this.isScroll) {
        this.isScroll = true
        this.resizeEvent()
      }
    },
    // 窗口缩放
    resizeEvent() {
      // 解决火狐浏览器table左侧fixed后,行之间不齐
      const explorer = window.navigator.userAgent
      if (explorer.indexOf('Firefox') >= 0) {
        //火狐浏览器
        const odiv = this.$refs.tableRef.$el.querySelector('.ant-table-body')
        // 左侧fixed后的滚动样式
        const oleftFixed = this.$refs.tableRef.$el.querySelector('.ant-table-body-inner')
        if (oleftFixed && odiv.scrollWidth > odiv.clientWidth) {
          // 有横向滚动条
          oleftFixed.style.setProperty('overflow-x', 'scroll', 'important')
        } else {
          oleftFixed.style.setProperty('overflow-x', 'hidden', 'important')
        }
        // 右侧fixed后的滚动样式
        let ofixed = null
        if (odiv) {
          ofixed = this.$refs.tableRef.$el
            .querySelector('.ant-table-fixed-right')
            .querySelector('.ant-table-body-inner')
        }
        if (odiv && odiv.scrollWidth > odiv.clientWidth) {
          // 有横向滚动条
          ofixed.style.setProperty('overflow-x', 'scroll', 'important')
        } else {
          ofixed.style.setProperty('overflow-x', 'hidden', 'important')
        }
      }
    },
  }

html文件
给 设置 ref 属性
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐