【VUE】elementUI table表格 列错位/滑动后切换每页显示数后错位/表格使用fixed后错位

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

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

 解决方法：

方法一：

1.1给表格添加ref

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

1.2添加actived 并调用methods里的方法

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

1.3在methods添加方法

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

方法二：

2.在列表调用接口的地方

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

方法三：

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

3.2 在要使用的vue页面中 给el-table添加ref

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

3.3 引入js

import tableMixin from '@/mixins/elementTableMixin';

3.4 添加

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

 

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

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