【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