展示问题
问题描述:使用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()}})
},
修改后的效果展示: