vue.js 如何处理返回数据中select 选项key和value不一致的问题？

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

一般我们后端返回的key和vlaue，属性值都是自定义的，这样我们下拉菜单就不能公共使用，所以我们要封装一个select公用的下拉组件。下拉框数据转为需要的key/value

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建公共的js文件

说明：方便我们导出，各个文件引用。

二、代码

1.代码示例

代码如下：

export function optionsTransform (data) {
  if (!data) return
  // 定义公共的 value key
  const list = ['value', 'key']
  const newArr = []
  // 遍历获取的数据
  data.map(item => {
    const newObj = {}
    for (let i = 0; i < list.length; i++) {
      newObj[list[i]] = item[Object.keys(item)[i]]
    }
    newArr.push(newObj)
  })
  return newArr
}

2.使用数据

在要用到的vue文件中引入
代码如下：

<script setup>
import { optionsTransform } from '@/utils/other'
getDevopsList()
    .then(res => {
      // 传入要转换的下拉数据
      optionsTransform(res.list)
    })
    .catch(err => {
      console.log(err)
    })
</script>

---

总结

希望有帮助到小伙伴们噢