使用elementUI el-select时踩的一个小坑

李、亚军

于 2019-07-18 14:22:57 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue项目学习

本文链接：https://blog.youkuaiyun.com/weixin_42520314/article/details/96429833

在使用Vue和ElementUI的el-select组件时，遇到一个问题：编辑页面时，需要根据后台返回的数据（value为id，label为dirName）设置v-model的值。最初直接设置id值，导致页面显示的是id而不是dirName。解决办法是确保后台返回的值与v-model的值为同一类型，如将两者都转化为字符串，这样el-option就能正确显示dirName了。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

卤煮使用vue-elementUI时使用el-select,从后台读取数据渲染el-option的value和lable,当卤煮编辑页面是需要从后台取到传给后台的value值，然后卤煮想让el-option显示的是lable值。

            <el-select
                class="height40"
                v-model.number="firstStep.sceneType.mostType"
                placeholder="请选择大类"
                :disabled="isChoosen"
                style="margin-right:20px;"
                @change="
                  val => {
                    changeTwo(val);
                  }
                "
              >
                <el-option
                  v-for="item in mostTypeList"
                  :key="item.id"
                  :label="item.dirName"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                class="height40"
                v-model.number="firstStep.sceneType.classification"
                placeholder="请选择分类"
                :disabl