Vue warn：“Error: if there’s nested data, rowKey is required.”

  最近，在使用Element-UI组件库时，使用表格组件出现一个头疼的问题，表格中需要用到扩展列，打包上线之前没有问题，打包之后dist文件运行后表格数据不显示，在Console面板出现如下错误：

  表面的意思是如果有嵌套的数据，需要在el-table标签中新增row-key字段。也就是说用到的组件时table，使用树结构时，数据里面需要有id，属性row-key是必填的。
  查阅文档才知道从element-ui 2.7.0 增加对树形结构数据的支持 ,而row-key是针对支持树类型的数据，所以处理树类型的数据，必须要是<el-table row-key='id'>，亲测id不能改成其他值。开始我的纠错连连看:

1.方法一： 根据文档修改<el-table>标签，变成<el-table row-key="id" :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"></el-table>
2. 修改之后将项目之后确实不报错了，表格数据却仍然不显示，而且打包之前表格出现两个扩展行，上图：

3. 出现这种错误时本来是因为element-ui版本问题，把package.json文件中版本号前边默认使用最新版本的"^"去掉后仍然没解决！！真是顽固的错误！

4.方法二： 从版本出发，终于找到祸源：在使用CDN优化ElementUI时在public–>index.html中添加的element-ui版本和项目版本不同导致的，把版本号修改过来就好了！Perfect！（我的项目版本低于2.7.0，所以如果项目版本较低，就不用添加高版本必须的row-key和tree-props两个字段，直接修改版本号就解决了）

PS:除了新增row-key属性之外，还可以尝试修改绑定数据源的children字段:

<el-table :data="tableData"></el-table>
tableData: [{
　　　　　　name: '好滋好味鸡蛋仔',
　　　　　　category: '江浙小吃、小吃零食',
　　　　　　desc: '荷兰优质淡奶，奶香浓而不腻',
　　　　　　children:[{
　　　　　　　　name:'土鸡蛋',
　　　　　　　　desc:'美味...'
　　　　　　}]
　　　　}]

  修改或删除数据字段毕竟比较困难，前后端人员都要出力，还是加上必需字段或者只修改版本号使之对应就可以解决的，不同的Vue项目需求不同，根据情况选择最佳处理方案即可。