关于elementUI同时使用多个el-table导致的样式错乱问题解决

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、问题出现的场景
• 二、问题解决方法
  • 1.添加key属性

---

前言

提示：这是记录我个人工作中遇到的问题的解决方法,希望可以帮助到遇到相同问题的道友

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、问题出现的场景

一、描述需求:当你需要做一个上下结构的页面时,常常出现这样的设计,上面为选项卡,下面为展示列表,上面的选项卡控制着对应的列表,每个列表的表头都不相同,这个时候,你大概率会考虑创建对应选项卡数量的列表,即创建多个el-table列表.

二、描述问题:在使用elementUI的项目中,需要创建多个el-table时,往往它们的列表展示内容不相同,有需要添加复选框的,有需要添加展开行的等等.

        这个时候直接写el-table会导致不同的el-table的样式会互相影响,第一个el-table的样式会导致第二个el-table的样式无法显示,或者直接第一个el-table的样式显示到第二个el-table上面,最终导致各个el-table的样式都无法成功显示.

三、出现原因:因为没有指定对应的key值,没有指明每个el-table的一个身份标识,类似于ID属性,指明以后,elementUI便能够将对应的样式渲染到对应的el-table中.

二、问题解决方法

1.给每一个el-table添加key属性,给定不同的值(推荐)

代码如下（示例）：

 

 

说明:这里添加key属性,相当于指定一个id,给每一个el-table一个唯一的标识,让elementUI去渲染样式的时候,找到对应的el-table,避免了未指定key时,渲染错乱,导致样式不一致.

题外:

1.如果需要实现同样的需求,也可以尝试设置v-show或者v-if来显示和隐藏el-table的列el-table-column,不过并不推荐过多使用v-if去频繁的操作el-table-column.

因为v-if会操作DOM元素去删除和添加el-table-column对应的元素,频繁的DOM元素操作,会极大的影响性能,导致页面卡顿.

2.如果使用v-show,许多情况下会使用,但是部分场景下,v-show会失效,适用性有局限,请根据个人需求,对应使用.