el-tabs组件配合el-table组件给表格添加多选列不生效问题总结

原创

已于 2025-09-03 16:48:44 修改 · 1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2023-12-18 23:17:31 首次发布

文章讲述了在Vue中使用el-tabs组件时，遇到的表格多选列渲染错误问题，经分析发现是v-if导致的DOM不稳定。作者解释了v-if和v-show的区别，并指出在频繁切换的组件中应使用v-show以保持DOM稳定性。

需求场景

头部使用的tab标签栏，标签栏下面是通过子标签key值控制对应的显示内容，内容中包含的业务数据表格，简易代码如下：

#html

<div>
 <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="首页" name="1"></el-tab-pane>
    <el-tab-pane label="配置管理" name="2"></el-tab-pane>
    <el-tab-pane label="角色管理" name="3"></el-tab-pane>
  </el-tabs>
</div>

# 标签对应的内容
<div v-if="activeName === '1'">
 <el-table
    :data="tableData"
    height="250"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
    >
     <el-table-column type="selection"width="55"></el-table-column>
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
  </el-table>
</div>
<div v-if="activeName === '2'">
    业务表格二
</div>
<div v-if="activeName === '3'">
    业务表格三
</div>

想要实现的场景就是通过切换tab，获取不同的业务数据并渲染到页面上，代码和业务逻辑上都没