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

展示问题

问题描述:使用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()
    }
  })
},

修改后的效果展示:

相关推荐
子兮曰2 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰2 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万2 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝2 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
A黄俊辉A2 天前
uniapp webview中实现 app和内嵌的H5双向通信
vue.js·json
三十而立洋2 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁2 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
honkun62 天前
vue 表格组件 vxe-table 配置 ajax 请求自动加载数据与表单查询
vue.js·vxe-table
kybs19912 天前
全球灾害数据分析可视化 毕业设计-附源码66794
vue.js·spring boot·mysql·安全·django·c#·asp.net
汉堡大王95272 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端