当前位置：首页 > web >正文

vue element使用el-table时，切换tab，table表格列项发生错位问题

web 2025/7/4 9:57:41

展示问题

在这里插入图片描述

问题描述：使用el-table的`fixed="right"`属性后，如果切换tab时，回出现最后一列错误的问题

官网提供解决方法：doLayout

在这里插入图片描述

需要注意的事项：我这里是通过组件使用的table组件，涉及多层组件封装问题，所以找这个根组件ref找到doLayout方法的时候需要注意写法 （如果存在组件签套，记得多加几次$refs[refName]调用方法）

<el-tabs v-model="searchParam.activeName" @tab-click="handleClick"><el-tab-pane label="统计" name="first"><leftTableref="leftTableRef":table-data-list="gateStatisticsListTable":table-all="gateStatisticsListTableAll":count="tableDataCount":search-param="searchParam"@refresh="refresh"@export-all="exportAll"@change-page="changePage" /></el-tab-pane><el-tab-pane label="明细" name="second"><rightTableref="rightTableRef":table-data-list="gateStatisticsListTable":table-all="gateStatisticsListTableAll":count="tableDataCount":search-param="searchParam"@refresh="refresh"@export-all="exportAll"@change-page="changePage" /></el-tab-pane>
</el-tabs>

 handleClick(tab, event) {this.$nextTick(() => {if (this.searchParam.activeName === 'first') {const that = this// 其中leftTableRef是el-table的refthat.$refs.leftTableRef.$refs.tableRef.doLayout()// 切换 tab请求接口this.queryData()}if (this.searchParam.activeName === 'second') {// 其中rightTableRef是el-table的refconst that = thisthat.$refs.rightTableRef.$refs.tableRef.doLayout()// 切换 tab请求接口this.queryData()}})
},