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],