vue+element 2.4版本下，el-select多選模式下無法修改的情況

環境

最近在學習前端開發，正好接觸一個項目，使用的是element組件2.4.6版本，因項目原因暫時沒有升級過，所以不能確定高版本的是否也有這個問題。

 

問題

問題代碼如下，簡略地寫了一下，大致情況是，form表單綁定了bank，支持多選的el-select綁定了bank.reqList，頁面加載時，會調用getDetail()方法，獲取bank對象，但是bank里面本身並不包含reqList字段，是手動給它賦值的。

結果會出現無法新增選擇且無法刪除已選項的問題。

html部分

<el-form :model = "bank">
    <el-form-item :model = "reqList” :required = "true" :show-message = "false">
        <el-select 
            clearable
            v-model = "bank.reqList"
            mutiple
            placeholder = "請選擇">
          <el-option label = "選項1" value = "0"/>
          <el-option label = "選項2" value = "1"/>
          <el-option label = "選項3" value = "2"/>
    </el-form-item>
</el-form>

script部分

data() {
    return  {
       bank: {}
    }
}

methods: {
    
    getDetail()  {
        ……………………
        this.bank.reqList = this.bank.req.join(',');
    }

}    

 

解決

實際上本人認為自己並沒有找到真正的問題所在，一開始以為是因為bank里面沒有reqList的初始值的原因，但是之后試了一些給reqList賦初值，也並沒有解決。

后來使用了以下臨時措施，希望能有大佬指導真正的問題所在~

在與bank同一級定義一個變量

如果el-select的v-model綁定的不是bank.reqList，而是req.reqList（在data中定義了一個新的變量req）,多選框就能夠正常使用了。

在el-form-item外再套一層form（為了直接使用表單校驗）

一般情況，上述方法就能解決了，但是由於包含表單校驗，如果直接去掉bank的話，el-form-item的prop會無法綁定到多選框上，因此這邊直接在外面又套了一層el-form，感覺是個笨方法，但臨時可以解決這個校驗的問題。