若依vue前后端分离，怎么根据id去展示name，动态更改下拉框选项

1.结果

数据库里面这里存的是id字段 但是要展示怎么展示

2.代码

1.后端

1.StaffMapper.xml

 <resultMap type="DbStaff" id="DbStaffResult">
        <result property="staffId"    column="staff_id"    />
        <result property="staffName"    column="staff_name"    />
        <result property="firstName"    column="first_name"    />
        <result property="bank"    column="bank"    />
        <result property="bankAccount"    column="bank_account"    />
        <result property="registrationStatus"    column="registration_status"    />
        <result property="status"    column="status"    />
        <result property="createTime"    column="create_time"    />
        <result property="updateTime"    column="update_time"    />
        <result property="employmentDate"    column="employment_date"    />
        <result property="jobId"    column="job_id"    />
        <association property="sysPosition"    column="position_id" javaType="SysPosition" resultMap="SysPositionResult" />
    </resultMap>
    <resultMap type="SysPosition" id="SysPositionResult">
        <result property="positionId"    column="position_id"    />
        <result property="positionName"    column="position_name"    />
    </resultMap>

    <sql id="selectDbStaffVo">
        select db_staff.staff_id, db_staff.staff_name, db_staff.first_name, db_staff.bank, db_staff.bank_account, db_staff.registration_status, db_staff.status, db_staff.create_time, db_staff.update_time, db_staff.employment_date, db_staff.job_id,sys_position.position_name
        from db_staff left join sys_position on db_staff.position_id=sys_position.position_id
    </sql>

2.DbStaff.java

    private SysPosition sysPosition;


    public SysPosition getSysPosition() {
        return sysPosition;
    }
    public void setSysPosition()
    {
     this.sysPosition=sysPosition;
    }

 @Override
    public String toString() {
        return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
            .append("staffId", getStaffId())
            .append("staffName", getStaffName())
            .append("firstName", getFirstName())
            .append("bank", getBank())
            .append("bankAccount", getBankAccount())
            .append("registrationStatus", getRegistrationStatus())
            .append("status", getStatus())
            .append("createTime", getCreateTime())
            .append("updateTime", getUpdateTime())
            .append("employmentDate", getEmploymentDate())
            .append("jobId", getJobId())
            .append("postId", getPostId())
            .append("sysPosition",getSysPosition())
            .toString();
    }

3.SyspositionMapper.xml

    <select id="selectSysPositionAll" resultMap="SysPositionResult">
        <include refid="selectSysPositionVo"/>
    </select>

4.SyspositionMapper.java

   /**
     * 查询所有岗位
     *
     * @return 结果
     */
    public List<SysPosition> selectSysPositionAll();

5.SyspositionServiceImpl.java

   /**
     * 查询所有岗位
     *
     * @return 结果
     */
    public List<SysPosition> selectSysPositionAll() {
        return sysPositionMapper.selectSysPositionAll();
    }

6.SyspositionService.java

    public List<SysPosition> selectSysPositionAll();

7.SyspositionController.java

    @GetMapping("/positionSelect")
    public AjaxResult positionSelect(){
        return AjaxResult.success(sysPositionService.selectSysPositionAll());
    }

2.前端

1.position.js

//查询岗位下拉列表
export function positionSelect(){
  return request({
    url: '/system/position/positionSelect',
    method:'get'
  })

2.staff.vue

//列表展示名字
<el-table-column label="岗位" align="center" prop="sysPosition.positionName" />


//增加下拉框
 <el-form-item label="岗位" prop="positionId">
                        <el-select v-model="form.positionId" filterable placeholder="请输入岗位" clearable  size="small">
                          <el-option
                            v-for="item in positionOptions"
                            :key="item.positionId"
                            :label="item.positionName"
                            :value="item.positionId">
                          </el-option>
                        </el-select>
               </el-form-item>




import { positionSelect } from "@/api/system/position";  
export default {
  name: "Staff",
  data() {
    return {
            //岗位下拉选项
      positionOptions:[],
   	}
  }
created() {
    this.getPositionSelect();
    }
    
    methods: {
    getPositionSelect(){
      positionSelect().then(response=>{
        this.positionOptions=response.data;
      })
    },
    }