ElementUI下拉框選擇后不顯示值如何解決

這篇文章主要介紹了ElementUI下拉框選擇后不顯示值如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇ElementUI下拉框選擇后不顯示值如何解決文章都會有所收獲，下面我們一起來看看吧。

ElementUI下拉框選擇后不顯示值

• 問題

vue(ElementUI)下拉框選擇后賦值了，但是框上不顯示

<!--下拉框-->
<el-form-item label="用戶角色" prop="role">
   <el-select v-model="editModel.role" :placeholder="selectPlaceholder" @change="handleChange">
      <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id">
      </el-option>
   </el-select>
</el-form-item>

解決

• 方法一

下拉框數據是循環調用接口，數據層次太多，render函數沒有自動更新，需手動強制刷新

// 手動刷新
handleChange() {
    this.$forceUpdate()
}

• 方法二

vue 無法監聽動態新增的屬性的變化，需要用 $set 來為這些屬性賦值

// 操作下拉框選中事件
handleChange(val) {
  // val 代表 value 值
  if (val) {
    // 操作選中角色發生變化
    this.$set(this.editModel, this.editModel.role, val)
  } else {
    this.$set(this.editModel, this.editModel.role, '')
  }
}

elementUI下拉框value和label問題

使用elementUI中的下拉模板時發現了一個很大的坑，根據文檔所介紹的是：

• key唯一標識

• label選擇之后顯示到選擇框中的值

• value選中之后綁定給模型層的值

<el-select v-model="department.manager" placeholder="請選擇">
    <el-option
        v-for="item in employees"
        :key="item.id"
        :label="item.username"
        :value="item">
        <span >{{ item.username }}</span>
        <span >{{ item.email }}</span>
       </el-option>
</el-select>

但跑起來好像并不是這么一回事label并沒有顯示到選擇框中。

然后我又微調了一下代碼 將v-model中的值修改了回顯問題解決了，但是選擇后的顯示問題依舊，我猜測和value有關。將value中的值修改成:value=“item.username”，選擇和回顯問題就解決了

<el-select v-model="department.manager.username" placeholder="請選擇">
    <el-option
        v-for="item in employees"
        :key="item.id"
        :label="item.username"
        :value="item.username">
        <span >{{ item.username }}</span>
        <span >{{ item.email }}</span>
       </el-option>
</el-select>

這個時候我意識到這和elementUI官網所說的不一致呀。并且提交表單后傳入后臺的數據只有manager.username是正確的 id仍然是回顯的id，沒有實現一個修改的效果，網上也給出了一些解決方法，但都達不到效果。  

苦思冥想之后（其實就是百度了又百度之后）。

發現問題出在value綁定到模型層處，綁定對象給模型層的時候一定要加value-key=“id”，最終代碼修改成如下

<el-select v-model="department.manager" placeholder="請選擇" value-key="id">
   <el-option
       v-for="item in employees"
       :key="item.id"
       :label="item.username"
       :value="item">
     <span >{{ item.username }}</span>
     <span >{{ item.email }}</span>
   </el-option>
</el-select>

關于“ElementUI下拉框選擇后不顯示值如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“ElementUI下拉框選擇后不顯示值如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。