【解决】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],复制