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

最新推荐文章于 2023-12-08 14:08:06 发布

原创最新推荐文章于 2023-12-08 14:08:06 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

IT成长笔记同时被 2 个专栏收录

48 篇文章

订阅专栏

大杂烩

10 篇文章

订阅专栏

在Vue.js应用中，遇到一个关于select选择器数据绑定的问题，当从后端获取的负责人ID为字符串类型，而之前存储的ID是整数类型时，导致数据无法正确匹配。修复这个问题需要确保类型一致。通过将后端接口返回的ID类型从字符串改为Long，成功解决了数据绑定显示与实际值不一致的bug，使得select下拉框能正确显示责任人名称并绑定其对应的ID。

select选择器有初值的情况下的数据绑定问题

- 想要实现功能：
- bug原因：

想要实现功能：

通过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显示上去了