欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element-ui之解決select無法回顯的問題

 更新時間：2023年04月05日 17:10:04   作者：前端小問題  
這篇文章主要介紹了element-ui之解決select無法回顯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element-ui解決select無法回顯

問題描述

給的是value的值，沒有正常顯示lable中的值，是因為當(dāng)select中只賦值了value沒有賦值lable的值時，系統(tǒng)會默認(rèn)將value和lable共用。

我們在綁定數(shù)值時value=“1” 是綁定的字符串，所以下面重新將value 賦值為2，同時lable也默認(rèn)成2，就顯示了2.

方法：使用**：value=“1”**就可以回顯。

<el-select v-model="moreForm.isVip" placeholder="獎勵會員" style="width:100%">
            <el-option label="普通會員" value="0"></el-option>
            <el-option label="vip" value="1"></el-option>
            <el-option label="vvip" value="2"></el-option>
          </el-select>

getUserInfor(row) {
       this.moreForm.isVip = row.isVip;
    },

解決方法

<el-select v-model="moreForm.isVip" placeholder="獎勵會員" style="width:100%">
            <el-option label="普通會員" :value="0"></el-option>
            <el-option label="vip" :value="1"></el-option>
            <el-option label="vvip" :value="2"></el-option>
          </el-select>

element-ui多個select回顯成功，但是選中無反應(yīng)

在使用el-select 組件出現(xiàn)一個小問題，對成功回顯后的數(shù)據(jù)，再次進(jìn)行添加，選框中沒有更新，但是提交表單，實(shí)際數(shù)據(jù)是更新的。懷疑可能是視圖層沒有更新，組件化框架類似問題。

原因 下拉框數(shù)據(jù)是循環(huán)別的接口得來的，因為數(shù)據(jù)層次太多，render函數(shù)沒有自動更新，需手動強(qiáng)制刷新

解決方案

添加 @change="$forceUpdate()" 強(qiáng)制更新視圖

<el-select v-model="form.roleIds" multiple placeholder="請選擇" @change="$forceUpdate()">
? ? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? ? v-for="item in roleOptions"
? ? ? ? ? ? ? ? ? :key="item.id"
? ? ? ? ? ? ? ? ? :label="item.roleName"
? ? ? ? ? ? ? ? ? :value="item.id"
? ? ? ? ? ? ? ? ? :disabled="item.status == 1"
? ? ? ? ? ? ? ? ></el-option>
? ? ? ? ? ? ? </el-select>?

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • 基于Vuejs和Element的注冊插件的編寫方法

    基于Vuejs和Element的注冊插件的編寫方法

    這篇文章主要介紹了基于Vuejs和Element的注冊插件的編寫方法,需要的朋友可以參考下
    2017-07-07
  • 全面解析vue中的數(shù)據(jù)雙向綁定

    全面解析vue中的數(shù)據(jù)雙向綁定

    這篇文章主要介紹了vue中的數(shù)據(jù)雙向綁定問題，非常不錯，具有參考借鑒價值,需要的朋友可以參考下
    2017-05-05
  • vue計算屬性computed方法內(nèi)傳參方式

    vue計算屬性computed方法內(nèi)傳參方式

    這篇文章主要介紹了vue計算屬性computed方法內(nèi)傳參方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • 如何在Vue中使用protobuf

    如何在Vue中使用protobuf

    這篇文章主要介紹了如何在Vue中使用protobuf，protobuf是由google推出的和語言無關(guān)和平臺無關(guān)，幾乎支持當(dāng)前的大部分語言，如JavaScript,下文更多相關(guān)介紹需要的小伙伴可以參考一下
    2022-03-03
  • VUE前端刪除和批量刪除實(shí)現(xiàn)代碼

    VUE前端刪除和批量刪除實(shí)現(xiàn)代碼

    這篇文章主要給大家介紹了關(guān)于VUE前端刪除和批量刪除的相關(guān)資料, 在實(shí)際的開發(fā)中,我們可以使用Vue.js來快速實(shí)現(xiàn)批量刪除功能,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
    2023-07-07
  • 手把手教你用VUE封裝一個文本滾動組件

    手把手教你用VUE封裝一個文本滾動組件

    封裝組件相信對大家來說都不陌生了,下面這篇文章主要給大家介紹了關(guān)于用VUE封裝一個文本滾動組件的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-01-01
  • vue限制文本輸入框只允許輸入字母、數(shù)字、禁止輸入特殊字符

    vue限制文本輸入框只允許輸入字母、數(shù)字、禁止輸入特殊字符

    這篇文章主要介紹了vue限制文本輸入框只允許輸入字母、數(shù)字、不允許輸入特殊字符,通過監(jiān)聽表單輸入的內(nèi)容,使用方法的缺陷,本文通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友參考下吧
    2023-10-10
  • 使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解

    使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解

    這篇文章主要介紹了使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Vue3使用watch進(jìn)行深度觀察的操作方法

    Vue3使用watch進(jìn)行深度觀察的操作方法

    在 Vue 3 中,一個重要的特性是 watch 選項,它允許開發(fā)者對數(shù)據(jù)變化進(jìn)行觀察,本篇博客將詳細(xì)介紹如何在 Vue 3 中使用 watch 進(jìn)行深度觀察,特別是在使用 setup 語法糖時,需要的朋友可以參考下
    2024-11-11
  • 一個Java程序猿眼中的前后端分離以及Vue.js入門(推薦)

    一個Java程序猿眼中的前后端分離以及Vue.js入門(推薦)

    這篇文章主要介紹了前后端分離及Vue.js入門，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04

最新評論