【Vue】【Element】下拉框返显,为何只显示选项的key,不显示选项的值?

一、问题

1.1、环境
电脑环境：Windows 10；
开发工具：IntelliJ IDEA；WebStorm
数据库环境：MySQL;
JDK环境: Jdk1.8；

1.2、问题
下拉框返显,为何只显示选项的key,不显示选项的值?
下面的下拉选项,value为0表示停用;value为1表示启用;

二、解答

     <el-form-item label="仓库状态" prop="status">
       <el-select v-model="dataForm.status" placeholder="请选择仓库归属">
         <el-option label="停用" value='0'></el-option>
         <el-option label="启用" value='1'></el-option>
       </el-select>
     </el-form-item>

这里是因为,查询后端,返显的值value为0,而且这个0是数字类型的,我们的这是写的是:

value='0'

前端判别的时候,判断后端返回的是数字0,而js中写的value的值是字符串类型,所以无法返显;我们将value前面加一个英文的冒号即可:

         <el-form-item label="仓库状态" prop="status">
           <el-select v-model="dataForm.status" placeholder="请选择仓库归属">
             <el-option label="停用" :value='0'></el-option>
             <el-option label="启用" :value='1'></el-option>
           </el-select>
         </el-form-item>

加了冒号,Element就会知道,单引号里的值不是字符串这类死值,而且包含数据类型的货值;这样就可以返显了;

完毕~

三、总结

欢迎关注我的
CSDN博客： https://blog.csdn.net/River_Continent
微信公众号：幕桥社区

知乎：张牧野， https://www.zhihu.com/people/zhang-mu-ye-37-76/activities
简书： https://www.jianshu.com/u/02c0096cbfd3