elementui 表格错位

• 使用elementui 表格, 浏览器正常大小时, 表格可以正常展示, 在页面中没有横向滚动条; 如果点击浏览器右上角的向下还原按钮时,表格的最后一列操作列会与前面的内容错位; 如果表格初始化时,就有横向滚动条,就不会出现这种问题

解决方式:

• 通过window.addEventListener 对浏览器的 'resize' 时间进行监听; 当浏览器缩放时, 触发监听事件,通过表格的 doLayout() 方法, 对表格进行重绘;

<template>
  <el-table
      :data="tableData"
      :header-row-style="{background: '#efefe'}"
      ref="table"
      style="width: 100%">
      <el-table-column
        width="50">  
      <el-table-column
        prop="name"
        label="姓名"
        min-width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        min-width="200"
        label="哒啦啦啦啦哒啦啦啦">
      </el-table-column>
      <el-table-column
        prop="address"
        min-width="180"
        label="国籍">
      </el-table-column>
      <el-table-column
        prop="address"
        min-width="180"
        label="工作">
      </el-table-column>
      <el-table-column
        prop="address"
        min-width="220"
        label="地址暗示分离看收垃圾分类凯撒奖">
      </el-table-column>
       <el-table-column
        fixed="right"
        width="180"
        label="操作">
        <template>
          <el-button size="mini">编辑</el-button>
          <el-button size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
</template>
<script>
export default {
  name: 'table',
  mounted() {
    // 监听事件时, 进行了防抖处理;
    window.addEventListener('resize', _.debounce(this.hanldeResize(), 150))
  },

  methods: {
    // 通过doLayout() 方法 对表格进行重绘;
    hanldeResize() {
      const tableEl = this.$refs['table'];
      tableEl.doLayout();
    }
  },

  beforeDestroy () {
    // 组件销毁时, 移除监听事件
    window.removeEventListener('resize', this.hanldeResize())
  }
}
</script>