展示问题

问题描述:使用el-table的fixed="right"
属性后,如果切换tab时,回出现最后一列错误的问题
官网提供解决方法:doLayout

- 需要注意的事项:我这里是通过组件使用的table组件,涉及多层组件封装问题,所以找
这个根组件ref找到doLayout方法的时候需要注意写法
(如果存在组件签套,记得多加几次$refs[refName]
调用方法)
js
<el-tabs v-model="searchParam.activeName" @tab-click="handleClick">
<el-tab-pane label="统计" name="first">
<leftTable
ref="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">
<rightTable
ref="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>
js
handleClick(tab, event) {
this.$nextTick(() => {
if (this.searchParam.activeName === 'first') {
const that = this
// 其中leftTableRef是el-table的ref
that.$refs.leftTableRef.$refs.tableRef.doLayout()
// 切换 tab请求接口
this.queryData()
}
if (this.searchParam.activeName === 'second') {
// 其中rightTableRef是el-table的ref
const that = this
that.$refs.rightTableRef.$refs.tableRef.doLayout()
// 切换 tab请求接口
this.queryData()
}
})
},
修改后的效果展示: