vue单页面多el-table表格样式冲突问题

问题描述：页面中使用了多个el-table表格，表格中有二级标题，在进行表格的切换展示的时候会发生一级标题表格展示不完全的问题。

出现问题的原因：点击当前的发生问题的表格发现他的样式和二级标题表格的样式是混用的。 

解决方法：给每一个表格指定一个key值，以此区分，进而不会相互影响。 

 问题代码：html部分

按钮
      
        
          
          
          
          
        
        
        
         
      

      
        
        
        
        
         
      

数据部分：

tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      flag: true,

按钮的方法部分：

btn() {
      this.flag = !this.flag;
    },

上述代码的功能就是点击按钮实现两个表格的切换。产生的效果图如下：

 

 

第二个表格没有将内容展示完全，并且发生了错位，此时给其中一个表格加上key值就可以。代码如下：

加完key后表格就行显示正常了，正常表图如下：

这里的key可以绑定任意值，只要能够区分两个表格就可以。