vue中id和用户名相互转换，显示用户名，调用接口返回id

前端页面上总是会存在，id和名称的相互转换，需要把id转换为名称，同时又需要接口返回的是id，这里我们选择使用vue组件的选择框来实现这个功能。

第一步，使用选择框

        <el-form-item label="用户名" prop="userId">
          <el-select v-model="form.userId" placeholder="请选择用户名">
            <el-option
              v-for="user in userList"
              :key="user.userId"
              :label="user.userName"
              :value="user.userId"
            />
          </el-select>
        </el-form-item>

第二步，在return中定义userList

 return {
      //用户名和id列表
      userList:[]
    };

第三步，调用接口查询出用户名和id的列表

/** 查询用户id和用户名 */
    getUserNameList() {
      getIdAndName().then(response => {
        this.userList = response.data;
      });
    },

第四步，在钩子函数中调用getUserNameList()方法。