修正el-table表格错位

第一种：

.el-table__fixed-body-wrapper .el-table__body {

  padding-bottom: 15px;

}

第二种：

1.创建一个directives.js文件，把下面代码放进去

function adjustColumnWidth(table, vnode) {

  //中文和全角正则

  const CN = new RegExp("[\u4E00-\u9FA5]|[^\uFF00-\uFFFF]");

  const NUM = new RegExp("[0-9]");

  //中文字体的像素宽度比例

  const CN_RATE = 1.1

  //数字字体的像素宽度比例

  const NUM_RATE = 0.65

  //其他字体的像素宽度比例

  const OTHER_RATE = 0.5

  const columns = vnode.child.columns.slice()

  //el-table通过colgroup标签设置html宽度

  const colgroup = table.querySelector("colgroup");

  const colDefs = [...colgroup.querySelectorAll("col")];

  //忽略 设置了宽度 序号 多选框 的列

  //判断gutter是否已存在

  const gutter = colgroup.querySelector(`col[name=gutter]`)

  const gutterx = colgroup.querySelector(`col[name=gutterx]`)

  let except = 0

  if (gutter || gutterx) {

      //删除gutter

      colDefs.pop()

  }

  //若有序号 多选框则删除

  except = colDefs.length - columns.length

  colDefs.splice(0, except)

  for (let i = columns.length - 1; i >= 0; i--) {

      if (columns[i].width) {

          colDefs.splice(i, 1)

          columns.splice(i, 1)

      }

  }

  //设置每列宽度

  colDefs.forEach((col, index) => {

      //colgroup中 和 表头标签的class名相同 通过class寻找相同列

      const clsName = col.getAttribute("name");

      const cells = [

          ...table.querySelectorAll(`.el-table__body-wrapper td.${clsName}`),

          ...table.querySelectorAll(`th.${clsName}`),

      ];

      const widthList = cells.map((el) => {

          const cell = el.querySelector(".cell")

          if (cell) {

              let fontSize = parseInt(window.getComputedStyle(cell, null).fontSize)

              fontSize = fontSize ? fontSize : 14

              let width = 0

              //计算每个字符的宽度

              for (let str of cell.innerText) {

                  if (CN.test(str)) {

                      width += fontSize * CN_RATE

                  } else if (NUM.test(str)) {

                      width += fontSize * NUM_RATE

                  } else {

                      width += fontSize * OTHER_RATE

                  }

              }

              return Math.ceil(width)

          } else {

              return 0

          }

      });

      //取一列中的最大宽度

      const max = Math.max(...widthList);

      if (max !== 0) {

          //在表格数据中设置minWidth 防止尺寸变化重新计算原来的宽度

          //20 + 2  20 是cell类的padding 2 是给予额外空间

          columns[index].minWidth = max + 22

          table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => {

              el.setAttribute("width", max + 22);

          });

      }

  });

  //设置完后调用el-table方法更新布局

  vnode.child.doLayout()

  tableRevise(table)

}

//修正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 = 15 + 'px'

          })

      }

      //解决固定列覆盖滚动条

      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% - 15px)'

      }

      if (fixed_right) {

          fixed_right.style.height = 'calc(100% - 15px)'

      }

      //解决表头偏移

      //没有原生的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', '15')

          colgroup.appendChild(col)

      }

  }

}

const tableFitDirective = {

  componentUpdated(el, binding, vnode) {

    setTimeout(() => {

      adjustColumnWidth(el, vnode);

    }, 0);

  }

};

export default tableFitDirective;

2.引用el-table直接用这个方法
import tableFit from './table/directives'
Vue.directive('tableFit', tableFit)

<el-table

      v-tableFit

      v-loading="loading"

      :data="projectmanageList"

      border

    ></el-table>