vue+element 多选下拉框的传值及回显_el-select下拉框多选及回显vue2

给select下拉框添加多选属性multiple

<el-select  v-model="ruleForm.hostid" multiple filterable size="small" >
     <el-option v-for="(item,index) in hostTypelist" :key="index" :value="item.hostid" :label="item.name">{{ item.name }}</el-option>
</el-select>

1、多选下拉框传值：

定义hostTypelist数组，

hostTypelist:[],
ruleForm: {
             hostid:[],     
           },

传值时：

//表单，下拉框多选传值
                let hostids = '';
                let hostnames = '';
               if(this.ruleForm.hostid.length>0){
                    this.ruleForm.hostid.forEach(function (item,index) {
                        if(index !== 0){
                            hostids+=',';
                            hostnames+=',';
                        }
                        hostids+=item;
                        this.hostTypelist.forEach(function (itx,idx) {
                            if(item === itx.hostid){
                                hostnames+=itx.name;
                            }
                        })
 
                    })
                }
                let form = {
                                hostid:hostids,
                            };
//form 对象经过处理传给后台

2、多选下拉框回显

this.$axios.post('方法名', ‘参数’).then(function (data) {
                    if(data.host){//获取到后台返回数据
                        let hostids=[];
                        data.host.forEach(function (item,index) {
                            if(index!==-1){
                                hostids.push(item.hostid)
                            }
                        });
                        this.ruleForm.hostid=hostids;
                    }
                });

因为要回显，所以回显的格式与之前保持一致（要数组形式），在最后循环的时候不能用刚开始定义的hostTypelist数组去接收，此时能回显出个数，但是显示内容是重复的，仔细思考这儿

<el-option v-for="(item,index) in hostTypelist" :key="index" :value="item.hostid" :label="item.name">{{ item.name }}</el-option>

回显循环的到底是什么。最后要的是hostid。