Ant-Design-Vue中Table使用固定列fixed，当出现横向滚动条时，行之间出现错位的问题

y向日葵

已于 2022-06-16 15:38:27 修改

阅读量9.5k

点赞数 3

文章标签：前端 css vue.js javascript

于 2022-06-06 11:01:01 首次发布

本文链接：https://blog.csdn.net/qq_38058176/article/details/125142814

版权

解决办法：给 .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')
        }
      }
    },
  }