【解決】Vue elementUI table表格 列錯位/滑動後切換每頁顯示數後錯位/表格使用fixed後錯位

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();
      });
    },
}

方法二

methods裏 getData，在返回200，調用doLayout()進行重新適應就可以了

    getList() {
      this.dataList = [];
      this.loading = true;
      getData(param).then((response) => {
        this.loading = false;
        if (response.code == 200) {
          this.dataList = response.rows;
          this.doLayout();
        }
      });
    },

方法三

1、在src/mixins/ 目錄下新建elementTableMixin.js

export default {
	// 切換頁面後 表格 固定列 列錯位
	mounted() {
		this.$nextTick(() => {
			this.$refs.table.$watch(
				'bodyWidth',
				() => {
					this.$refs.table.doLayout();
					this.$refs.table.height = '500px';
				},
				{ immediate: true }
			);
			this.$refs.table.doLayout();
		});
	},
    //滑動列表後切換每頁顯示數後 列錯位
	updated() {
		this.$nextTick(() => {
			this.$refs.table.bodyWrapper.scrollTop = 0;
		});
	},
};

2 、在要使用的vue頁面中 給el-table添加ref

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

3 、引入js

import tableMixin from '@/mixins/elementTableMixin';

4 、添加

export default {
	name: 'pageName',
	mixins: [tableMixin],