【VUE】elementUI 表格使用fixed 切换页面后列错位
【代码】【VUE】elementUI 表格使用fixed 切换页面后列错位。
·
方式一:
去除设置的定高
<el-table
v-adaptive="{ bottomOffset: 85 }"
height="100px" //去除定高
v-loading="loading"
:data="dataList"
ref="doLayout"
>
方式二:
表格在进行页面切换后出现错位或者多余边线等情况时
1.给表格添加ref
<el-table
min-height="400px"
v-loading="loading"
:data="dataList"
ref="tableref"//添加ref
>
2.找到页面切换时的变量,watch里监听
watch: {
showPage: {
handler(oldVal, newVal) {
if (oldVal != newVal) {
this.$nextTick(() => {
this.$refs.tableref.doLayout();
});
}
},
deep: true,
},
},
方式三(终极方法):
在src/mixins/ 下新建.js文件
export default {
// 切换页面后 表格 固定列 列错位
mounted() {
this.$nextTick(() => {
this.$refs.table.$watch(
'bodyWidth',
() => {
this.$refs.table.doLayout();
},
{ immediate: true }
);
});
},
};
1.1错位页面使用
import tableMixin from '@/mixins/elementTableMixin'; //引用
export default {
name: 'scanGoodsRecommend',
mixins: [tableMixin],//使用
}
1.2全局配置
在main.js中引入并使用,然后在任何组件中直接调用即可
如果组件中有同名的变量或者方法,就会使用组件中的变量或者方法
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 引用混入
import Mixins from "@/Mixins/index"
Vue.mixin(Mixins)
import axios from "axios"
Vue.prototype.axios=axios
new Vue({
render: h => h(App),
}).$mount('#app')
更多推荐



所有评论(0)