前言

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

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

一、问题出现的场景

一、描述需求:当你需要做一个上下结构的页面时,常常出现这样的设计,上面为选项卡,下面为展示列表,上面的选项卡控制着对应的列表,每个列表的表头都不相同,这个时候,你大概率会考虑创建对应选项卡数量的列表,即创建多个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属性,给定不同的值(推荐)

代码如下（示例）：

                <el-table
                :data="facilities_data"
                style="width: 100%; margin-top: 10px"
                height="100%"
                @row-click="rowfacilities"
                ref="facilitiestable"
                @select="selectrow"
                empty-text="　"
                v-loading="titleloading"
                key="table1"
                >

         </el-table>

                <el-table
                :data="facilities_data"
                style="width: 100%; margin-top: 10px"
                height="100%"
                @row-click="rowfacilities"
                ref="facilitiestable"
                @select="selectrow"
                empty-text="　"
                v-loading="titleloading"
                key="table2"
                >

                </el-table>

  <el-table
                :data="facilities_data"
                style="width: 100%; margin-top: 10px"
                height="100%"
                @row-click="rowfacilities"
                ref="facilitiestable"
                @select="selectrow"
                empty-text="　"
                v-loading="titleloading"
                key="table3"
                >

                </el-table>

说明:这里添加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会失效,适用性有局限,请根据个人需求,对应使用.