使用单选框实现编辑功能时，elementUI的el-select显示为value而不显示label的问题。

ironybbb

于 2021-09-13 16:33:24 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue实用代码片段解决vue小问题文章标签： elementui javascript html

本文链接：https://blog.csdn.net/weixin_43185419/article/details/120269789

vue实用代码片段同时被 2 个专栏收录

11 篇文章

订阅专栏

解决vue小问题

5 篇文章

订阅专栏

这篇博客讲述了在Vue项目中，利用table的单选选中功能实现编辑时遇到的el-select回显问题。作者发现通过scope.row与选中回调参数val（multipleSelection）获取的数据类型不同，导致el-select无法正确识别value。解决方案是将需要的值转换为字符串类型，如`this.form.cusstate = String(this.multipleSelection.cusstate)`，从而确保el-select能正确显示选中状态。

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

当前效果为：
在这里插入图片描述
想要的效果为：

以前实现编辑功能是通过scope.row来实现数据回显，在下拉框中都可以正常显示label值。这次第一次使用了table的单选选中后实现编辑功能，使用的是选中时回调的参数val，（标记为multipleSelection），猜测是两种方式回调的数据类型不一致，导致el-select没识别到该值为value。
html代码：

			   <el-select
                  placeholder="请选择状态"
                  v-model="form.cusstate"
                  style="width: 250px"
                >
                  <el-option label="正常" value="1"></el-option>
                  <el-option label="开发中" value="2"></el-option>
                  <el-option label="暂停" value="3"></el-option>
                </el-select>

这里需要的value值为String类型的。
所以在JS获取数据时，把需要的数据类型转化为字符串类型即可。

		this.form = this.multipleSelection
        this.form.cusstate = String(this.multipleSelection.cusstate)