el-select(选择器)默认为单选,里面加个multiple属性就实现多选啦
v-model 绑定数据,@change里面的方法为数据变化后触发
页面如下:
![](https://i-blog.csdnimg.cn/blog_migrate/98daea8b6ab0f344e2a1f297f5f1d6bb.png)
绑定数据的如下:
![](https://i-blog.csdnimg.cn/blog_migrate/045ab911928271cf8aff9f582c3a649b.png)
方法:切割数据并且中间以逗号分割,组成新字符串
![](https://i-blog.csdnimg.cn/blog_migrate/b5b17c08f242a1e903f4573edc547c87.png)
实现效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/9d10265d7133527ac39005286b3bcbb1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/96677b644c58f1fd5aaab7018053a2f0.png)
![](https://i-blog.csdnimg.cn/blog_migrate/7b42d87fef505154533bd05d2592b9cc.png)
pkgPurModesChange(value){
if(value != null || value!=''){
var result = '';
for(var i = 0; i<value.length; i++){
result += value[i]
if(i<value.length-1){
result+= ','
}
}
result.slice(0,result.length-1);
return result;
}
}
ps:有个bug,改良后如下
getpkgPurModesName(options, str){ //翻译管理范围
var result = '';
if(str != null && str != ''){
var strTemp = str.split(",")
for(var i = 0;i<strTemp.length;i++){
for(var j = 0;j<options.length;j++){
if(strTemp[i] == options[j].value){
if(j!=0 && strTemp.length>1){ //这里要多判断一下
result += "、" //空格改为顿号
}
result += options[j].label;
}
}
}
return result
}else{
return '——';
}
}