VUE+Element select下拉框，从对象数组中拿到每一个对象的其中一个字段作为下拉框的选项

记录一下在做项目的时候遇到的小问题，以便日后查阅，也希望对在学习的你有帮助

---

问题描述：

select下拉框的选项要根据后端返回的值动态生成，但是请求接口之后发现返回的是对象数组，其中一些信息是当前用不到的（黄色框起来的字段才是需要的部分，见下图）

---

原因分析：

因为是对象数组，所以不能单纯的用this指向来赋值

---

解决方案：

直接上代码，用到ES6的map()方法，具体使用不懂的还请自己百度哦~

这是下拉框的代码

            <el-form-item label="角色名称：" prop="roleName" label-width="120px">
            <el-select
              v-model="ruleForm.roleName"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in props"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

data里的内容

data() {
    
    
  return {
    
    
    ruleForm: {
    
    
        roleId: '',
        roleName: ''
      },
      props: [],
    }
  }

逻辑代码，这里注意map()方法是需要写return的

methods: {
    
    
// 下拉列表的选项
// listAll是我接口的名字，大家自行修改
      listAll({
    
    }).then((res) => {
    
    
        // console.log(res.data)
        this.props = res.data.map((item) => {
    
    
          return {
    
     value: item.id, label: item.roleName }
        })
      })
 }

这是分离后的新数组，下拉框的选项就是循环这个

效果