vue原生table表格 通过v-for遍历数据生成td单元格错位问题

如图所示，由于要求的表格样式和排版有些复杂，所以并没有采用element的table组件进行设计，而是才用了原生的HTML的table包裹tr、td进行设计的表格。

因为排版复杂所以我用了比较笨的方式  通过分别遍历数组，把数据填入到表格中

效果如下：

首次进到页面，数据渲染是没有问题的 表格的排版布局也是正常的，刷新也是没问题的

但是当点击查询栏，选择日期，进行查询后，随即出现单元格的错位，如绿色箭头所示：

此时还发现一个问题，红色箭头处，再次点击查询栏，选择日期没有反应，页面卡住，刷新后，表格恢复正常。

再看浏览器，网络请求回来的数据里，去找错位处的这个数据，发现请求回来的数据里是没有这个值的，再看数据库里前一天数据，发现页面数据是查询当天和其他天的数据混淆渲染的。

浏览器报错：（检测到重复的key，可能造成更新错误）

尝试把遍历渲染处的key进行改变 item—>index

最终 表格正常显示，查询也不会错位。