位置: IT常识 - 正文
解决Element-ui的el-table出现的表格错位问题(element-ui dialog)
编辑：rootadmin解决Element-ui的el-table出现的表格错位问题 
本文链接地址:https://www.jiuchutong.com/zhishi/289038.html
转载请保留说明！
推荐整理分享解决Element-ui的el-table出现的表格错位问题(element-ui dialog)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:element-ui dialog,element-ui dialog,element_ui,element ui bug,element-ui dialog,elemental ui,element_ui,elemental ui,内容如对您有帮助，希望把文章链接给更多的朋友！
在使用element-ui中的el-table时，我们经常会用到fiexd属性，而使用了fixed属性之后，就会容易在各种场景出现表格错位的问题。
查阅element-ui官网，发现官网提供了doLayout方法来解决这个问题
总结容易出现错位问题的几种场景及解决办法
1、数据更新后出现的错位问题
1.1 直接在数据赋值后执行doLayout方法
this.data = data;// 在数据更新后执行this.$nextTick(() => { // myTable是表格的ref属性值 if (this.$refs.myTable && this.$refs.myTable.doLayout) { this.$refs.myTable.doLayout(); }})1.2在生命周期updated里执行doLayout方法
updated() { // myTable是表格的ref属性值 if (this.$refs.myTable && this.$refs.myTable.doLayout) { this.$refs.myTable.doLayout(); }}2、浏览器窗口大小变化时出现的错位问题
// 绑定window的onresize事件（注意，onresize事件只能有一个）window.onresize = () => { // myTable是表格的ref属性值 if (this.$refs.myTable && this.$refs.myTable.doLayout) { this.$refs.myTable.doLayout(); }}3、当有多个Tab标签时，切换标签出现的错位问题
这时可以有多种解决方式
3.1 在组件守卫beforeRouteEnter里执行doLayout方法
beforeRouteEnter(to, from, next) { // myTable是表格的ref属性值 if (this.$refs.myTable && this.$refs.myTable.doLayout) { this.$refs.myTable.doLayout(); } //不能忘记这个哦 next(); }3.2 如果使用了keep-alive，可以在activated里执行doLayout方法
activated() { // myTable是表格的ref属性值 if (this.$refs.myTable && this.$refs.myTable.doLayout) { this.$refs.myTable.doLayout(); } }3.3 也可以通过监听路由，在watch里执行doLayout方法
watch: { $route() { this.$nextTick(() => { // myTable是表格的ref属性值 if (this.$refs.myTable && this.$refs.myTable.doLayout) { this.$refs.myTable.doLayout(); } }) } }如果当项目已经开发进入尾声，此时需要修改大量的文件，而我们可能更希望一次性解决这个问题，这个时候可以在App.vue里找到解决的思路
<template> <div id="app"> <router-view ref="appView"></router-view> </div></template><script>export default { data() { }, watch: { $route() { //切换标签时 this.handleRefreshTable(); } }, created() { let _this = this; //窗口改变时 window.onresize = function () { _this.handleRefreshTable(); }; }, updated() { //数据改变时 this.handleRefreshTable(); }, methods: { handleRefreshTable() { this.$nextTick(() => { // 获取页面中已注册过ref的所有的子组件。 let refList = this.$refs.appView.$refs; if (refList) { for (let i of Object.keys(refList)) { // 根据doLayout方法判断子组件是不是el-table if (refList[i] && refList[i].doLayout) { // 执行doLayout方法 refList[i].doLayout(); } } } }) } }};</script>上一篇：苏格兰高地上的厄克特城堡和内斯湖 (© AWL Images/Danita Delimont)(苏格兰高地什么意思)
