【debug】elementUI框架中select选择器一开始有初始值的情况下的显示问题

想要实现功能：

通过elementUI实现一个table表 然后点击编辑按钮后，会访问后端的接口查询单个地点的信息，然后将查询到的单个信息展示在弹出框里，但责任人是有一个id和一个name的属性，下拉框中要显示name的值，但id的值必须绑定对应的name的值，因为点击保存时，要将责任人的id传给后端进行数据库的修改，select选项的使用问题

下拉单的代码如下：

<el-select ref="chooseList"  v-model="dataForm.userId" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>

vue结构的下方export default中的数据如下：

data() {
    return {
      visible: false,
      dataForm: {
        area: "",
        areaRemark: "",
        userId: null,
        userName:"",

      },
 }

主界面如下图所示：

弹出框如下图所示：但下面这个显示并未满足我的要求，我要求它显示userName，但真实绑定的值为userId，下面这个样子，它显示绑定了userId

责任人下拉菜单的选项通过请求进行获得：

bug原因：

排查了很久的bug原因，也找前端的帮我查看了一下，最后找到了原因
在请求单个区域的信息时，获取到的id值为字符串类型，但是之前allName请求获得的id类型为整数类型，它不能一一对应上去

于是我回到了后端的这个接口请求返回的数据的模块这儿：
这是写的接口请求，然后在去查看一下AreaSignalVo的实体内容：

AreaSignalVo内容：

在这个里面确实发现返回值为String字符串类型，
将其修改为了Long类型，重启后端运行

之后这个对应的id就能将对应的name显示上去了