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

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

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

解决方法

方法一

1、给表格添加ref

<el-tableref="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-tableref="table"v-adaptive="{ bottomOffset: 85 }"height="500px":data="dataList">

3 、引入js

import tableMixin from '@/mixins/elementTableMixin';

4 、添加

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