最近开始接手一个vue的后台管理项目,使用element-ui框架库进行搭建。
项目开始根据不同的页面需求,给组件添加keep-alive
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
之后就是布局每个组件,然后就碰到了这样的一个情况
是的,你没有看错,表格错位了。
查看控制台,没有发现有什么异常。之后就去element官网看了一下关于表格的文档,发现了这样一个东西
然后又想到我的组件是有keep-alive的,和上面说的情况类似,就用这个doLayout方法试试
activated() {
this.$nextTick(() => {
this.$refs.table.doLayout(); //解决表格错位
});
}
activated是使用的keep-alive之后独有的钩子函数,在这个钩子里面对table重新布局,然后就ok了
大功告成