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

Posted on by

element-ui解決select無法回顯

問題描述

給的是value的值，沒有正常顯示lable中的值，是因為當select中隻賦值瞭value沒有賦值lable的值時，系統會默認將value和lable共用。

我們在綁定數值時value=“1” 是綁定的字符串，所以下面重新將value 賦值為2，同時lable也默認成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回顯成功，但是選中無反應

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

原因 下拉框數據是循環別的接口得來的，因為數據層次太多，render函數沒有自動更新，需手動強制刷新

解決方案

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

<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> 

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：