vue 改造后端传过来的数据

最近做项目的时候遇到一个问题，就是ant design vue组件引用穿梭框的时候，穿梭框组件需要有key,而后端传过来的数据没有key这个字段

我之前看ant design vue官网中有这样的解决方案

按照 Vue 最新的规范，所有的组件数组最好绑定 key。在 Transfer 中，dataSource里的数据值需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。

// 比如你的数据主键是 uid
return <Transfer :rowKey="record => record.uid" />;

我按照官网的做了，实现是可以实现但发现还是有警告说vue验证属性失败，这些警告一有操作就会产生，但是用你自己模拟的数据测试有key这个字段就不会报错

于是就把后端传过来的数据改造一下。代码如下

//首先把后端传过来数据用一个变量接收一下，然后将这个变量赋值给穿梭框里的数据，之后用map这个变量遍历一下
const result = res.data.data 
his.mockData = result 
 result.map( (item,index) => {
                    this.mockData[ index ].title = item.standardSpecifyName
                    this.mockData[ index ].key = item.id
                })   

      <a-transfer
                :dataSource="mockData"
                :titles="['检验规范选择', '已选规范']"
                :listStyle="{
                  width: '354px',
                  height: '300px',
                }"
                :targetKeys="targetKeys"
                :selectedKeys="selectedKeys"
                @change="handleChange"
                @selectChange="handleSelectChange"
                :render="item=>item.title"
              />