【VUE】elementUI table表格 列表错位

table表格右侧列固定后，在切换页面之后，就会出现列错误的现象

<el-table
        v-adaptive="{ bottomOffset: 85 }"
        height="100px"
        v-loading="loading"
        :data="dataList"
      >

 解决方法：

1.给表格添加ref

<el-table
        ref="doLayout"  //添加ref，名字可自定义
        v-adaptive="{ bottomOffset: 85 }"
        height="100px"
        v-loading="loading"
        :data="dataList"
      >

2.添加actived 并调用methods里的方法

  activated() {
    this.doLayout();
  },

3.在methods添加方法

  methods: {
    doLayout() {
      this.$nextTick(() => {
        this.$refs.doLayout.doLayout();
      });
    },
}

即可解决

此方法为elementUI官方方法，可参考

 

方法名	说明	参数
clearSelection	用于多选表格，清空用户的选择	—
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
toggleAllSelection	用于多选表格，切换所有行的选中状态	-
toggleRowExpansion	用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）	row, expanded
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
clearSort	用于清空排序条件，数据会恢复成未排序的状态	—
clearFilter	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件	columnKey
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法