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