【vue】element ui 表格优化——解决显示错位问题

最新推荐文章于 2024-07-23 15:23:30 发布

原创最新推荐文章于 2024-07-23 15:23:30 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #vue.js #elementui

当使用ElementUI的el-table组件并动态加载数据时，可能会遇到表格显示错位的状况。通过监听tableData并在数据变更后调用`doLayout()`方法可以修复这个问题。在组件的watch中设置对tableData的深度监听，并在数据更新后利用$nextTick确保DOM更新，然后调用`this.$refs.multipleTable.doLayout()`来重新布局表格，从而解决错位问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ElementUI el-table 动态显示表格的时候，会发生显示错位的情况，拖拽一下又恢复正常了

之前试试了各种css都没有效果

/* 表格错位的问题 */
	.working-hours-table {
    /deep/.el-table__fixed-body-wrapper{
      top:29px !important;
      height: calc(100% - 29px) !important;
    }
    /deep/.el-table__fixed{
		height: 100% !important;
    }
    /deep/ .el-table__fixed-right{
      height: 100% !important;
    }
  }

解决办法：

watch: {
            // tableData是el-table绑定的数据
            tableData: {
                // 解决表格显示错位问题
                handler () {
                    this.$nextTick(() => {
                        // tableRef是el-table绑定的ref属性值
                        this.$refs.multipleTable.doLayout() // 对 Table 进行重新布局
                    })
                },
                deep: true
            }
        },