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，感觉是个笨方法，但临时可以解决这个校验的问题。