elementui的多选框选中问题,elementui多选
这篇文章主要介绍了某视频剪辑软件元素多个相同的挑选不允许重复选择问题,具有很好的参考价值,希望对大家有所帮助。
目录
元素多个相同的挑选不允许重复选择动态循环出的多个挑选不能重复选择相同的数据先看效果图
element多个相同的select不允许重复选择
模板
div class= com _ searchandpagebox padding
差异
El-select v-model= value 1 placeholder=请选择
El-option v-for= item in haha :key= item。 id :label= item。“label”:value=“item。 id :disabled= disabled choose(item)
/el选项
/el-select
El-select v-model= value 2 placeholder=请选择
El-option v-for= item in haha :key= item。 id :label= item。“label”:value=“item。 id :disabled= disabled choose(item)
/el选项
/el-select
El-select v-model= value 3 placeholder=请选择
El-option v-for= item in haha :key= item。 id :label= item。“label”:value=“item。 id :disabled= disabled choose(item)
/el选项
/el-select
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
值1: ,
值2: ,
值3: ,
哈哈:[{
id: 1,
值: 选项1,
标签: 黄金糕
}, {
id: 2,
值: 选项2,
标签: 双皮奶,
禁用:真
}, {
id: 3,
值: 选项3,
标签: 蚵仔煎
}, {
id: 4,
值: 选项4,
标签: 龙须面
}, {
id: 5,
值: 选项5,
标签: 北京烤鸭
}],
}
},
计算值:{
已禁用选择(项目){
返回功能(项目){
设findItemIndex=[this.value1,this.value2,this.value3].查找索引(项目2=项目2==项目。id);
console.log(findItemIndex ,findItemIndex)
设newArr=[this.value1,this.value2,this.value3]。splice(findit index,1);
console.log(newArr ,newArr)
返回新arr。包括(项目。id);
}
}
},
方法:{
显示切换(项目){
item.isSubShow=!item.isSubShow //需要展开内容,显示与隐藏之间切换
},
详细信息(项目){
这个1000美元路由器。推送(/help details/项目)
},
},
已安装(){
}
}
/脚本
style lang= scss src= @/assets/CSS/card。scss /样式
动态循环出的多个select 不能重复选择相同的数据
先看效果图
代码如下:
模板
parArr中的program v-for=(parItem,index):key= parItem。guid
选择v-model= paritem。id @ on-change= onchange program
选项程序列表中的v-for=(subItem,idx ):key= subItem。 id :data-index= idx
v-show= paritem。id==子项。id !选择dsarr。包括(子项。id)
:value=子项。id { { subitem。name } }/选项
/选择
/div
/模板
脚本
导出默认值{
data() {
返回{
parArr:[{guid:ddddd ,id:null,},{guid:eeeee ,id:null,},{guid:ffff ,id:null,}],
选定的sarr:[],
程序列表:[{
id:1,
姓名:选项1
},{
id:2,
姓名:选项2
},{
id:3,
姓名:选项3
}],
}
},
方法:{
onChangeProgram() {
这个。selectid sarr=[];
对于(这个。帕拉尔的常量项目
if (item.id) {
这个。selectidsarr。推(项。id);
}
}
},
},
}
/脚本
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。