el-table 固定表头和固定列之后 由于滚动条导致的 表格线错位


		table 直接调用tabelRevise函数即可
		tableRevise(this.$refs.dirctTable.$el)
	
          //修正el-table错位
          function tableRevise(table) {
            const tableWrapper = table.querySelector('.el-table__body-wrapper')
            const tableBody = table.querySelector('.el-table__body')
            const colgroup = table.querySelector("colgroup");
            /**
              * (以下数值为滚动条高度,可以自己根据情况通过class重新修改)
              */
            //内容大于容器时
            if (tableBody.clientWidth > tableWrapper.offsetWidth) {
              
              //设置x轴滚动
              tableWrapper.style.overflowX = 'auto'
              //解决固定列错位 (没有错位的可以忽略以下内容)
              let fixedWrap = table.querySelectorAll('.el-table .el-table__fixed-body-wrapper')
              if (fixedWrap.length > 0) {
                fixedWrap.forEach(item => {
                  item.style.paddingBottom = 10 + 'px'   //10 为设置的滚动条宽度     
                  // ::-webkit-scrollbar {
                  //   width: 10px;
                  //   height: 10px;
                  //   background-color: #f5f5f5;
                  //   position:absolute;
                  // }
                })
              }

              //解决固定列覆盖滚动条
              let fixed_left = table.querySelector('.el-table .el-table__fixed')
              let fixed_right = table.querySelector('.el-table .el-table__fixed-right')
              if (fixed_left) {
                fixed_left.style.height = 'calc(100% - 10px)'
              }
              if (fixed_right) {
                fixed_right.style.height = 'calc(100% - 10px)'
              }

              //解决表头偏移
              //没有原生的gutter时自己新增一个
              const gutter = colgroup.querySelector(`col[name=gutter]`)
              const gutterx = colgroup.querySelector(`col[name=gutterx]`)
              if (!gutter && !gutterx) {
                let col = document.createElement('col')
                col.setAttribute('name', 'gutterx')
                col.setAttribute('width', '10')
                colgroup.appendChild(col)
              }
            }
          }

你可能感兴趣的:(javascript,vue.js)