Vue中使用el-table踩过的坑（一）1，:data数据更新视图不自动更新。2，数据量过多的时候出现数据错乱

1： data数据更新视图不更新的问题。

我的el-table部分代码如下：

<el-table 
    :data="collectResult"
    header-cell-class-name='x-table-header'
    border
    style="width: 500px;font-size: 11px">
    <el-table-column
      prop="resCollFile"
      label="验证的文件数量"
      style="width: 80%">
    </el-table-column>
    <el-table-column
      prop="resCollServer"
      label="服务器数量"
      style="width: 80%">
    </el-table-column>
    <el-table-column 
      prop="resCollectRecords"
      label="验证的记录数" style="width: 80%">
    </el-table-column>
    <el-table-column
      prop="resCollectFailed"
      style="color: red"
      label="失败的记录数" >
    </el-table-column>
    
  </el-table>

 我的这个collectResult属性比较特殊，这个数组里面只会放一个对象，但是这个对象会变化，也就是这个数组会重新生成，就是在重新生成的时候这个el-table不会自动更新。

原本是这样：

this.collectResult=[];
.....重新生成需要的对象obj...
this.collectResult.push(obj);

按道理讲是改变了这个collectResult属性值，但是页面的数据并没有更新。

经过一番了解，才知道。官网上也指出：当vue的data里面声明或者已经赋值过的对象或数组（包含对象值），向对象里面添加新的属性和更新这个新属性的值，页面视图是不会更新的

我这个数组在改变的时候就相当于数组里面的对象属性值发生了变化，因为数据大小没变，如果数组大小也变了的话页面是可以更新的这个已经试过了。

那应该怎么解决呢？

网上也有各种说法，用$set 或者 Object.assign或者watch等。但是我这里用 :key 就解决了，这个 :key是vue中的，因为早期el-table在数据变化的时候会有错误，所以加入一个键，保证每次变化都会重新渲染表。所以只要在el-table中加上这个属性值既可。默认为true。

问题解决！

2：el-table中data数据比较多

还碰到一个问题，就是:data=dataList 当这个数组比较多有一千多条数据的时候，数据会发生错乱，比如，某行数据的两个单元格属性

prop="sourceMd5"和prop="targetMd5"，在前几百条数据还是正常的，但是后面的数据就会出现明明当前遍历的对象的"targetMd5"属性没有值，但是却显示了一个值在页面上，这个值是某个"sourceMd5"的值，这种数据时不时会出现。我页面alert后台返回的数据是正常的。就是前段页面展示的时候出现这种现象，百思不得其解！

最后没找到原因，我换了一个中数据展示方式。自定义template展示数据，原先我们使用el-table展示数据就像上面那样一样，写上:data和各列的prop属性就可以了。但是我们还可以这样写：自己写出来属性的变量名。起码显示正常了。但是具体原因还不知道，哪位知道可以好心告知下。关于slot-scope 的取值可以参考这篇博客：slot-scope

 <el-table-column
      label='源文件md5'
      style='width: 80% ;height: 90%'>
       <template slot-scope="scope">
        <el-button type="text" size="small"  
       @click="addfileMd5(scope.row.fileName,scope.row.sourceMd5)">查看源MD5
       </el-button>
      </template>
 </el-table-column>