站长资源网络编程
vue动态循环出的多个select出现过的变为disabled(实例代码)
简介vue动态循环出的多个select出现过的变为disabled
vue动态循环出的多个select出现过的变为disabled
<template>
<div class="artcle">
<el-form
label-width="100px"
:model="testForm">
<el-form-item
v-for="(vtem, index) in testForm.version"
:key="index"
label="命令版本">
<el-select
@change="comChange"
v-model="vtem.ver">
<el-option
v-for="item in versionList"
:key="item.id"
:value="item.id"
:disabled="item.id == vtem.ver || selectedArr.includes(item.id)"
:label="item.name">
</el-option>
</el-select>
<el-button
icon="el-icon-circle-plus-outline"
size="small"
@click="add(index)"
circle></el-button>
<el-button
icon="el-icon-remove-outline"
size="small"
@click="remove(index)"
:disabled="index === 0"
circle></el-button>
</el-form-item>
<el-form-item
label="测试输入框">
<el-input
v-model="testForm.input"></el-input>
</el-form-item>
</el-form>
</div>
</template>
ps:vue 动态循环出的多个select 不能重复选择相同的数据
<template>
<div class="program" v-for="(parItem,index) in parArr" :key="parItem.guid">
<Select v-model="parItem.id" @on-change="onChangeProgram">
<Option v-for="(subItem,idx) in programList" :key="subItem.id" :data-index='idx'
v-show="parItem.id == subItem.id || !selectIdsArr.includes(subItem.id)"
:value="subItem.id> {{subItem.name}}</Option>
</Select>
</div>
</template>
<script>
export default {
data() {
return {
parArr:[],
selectIdsArr:[],
programList:[{
"id":1,
"name":"选项1"
},{
"id":2,
"name":"选项2"
},{
"id":3,
"name":"选项3"
}],
}
},
methods: {
onChangeProgram() {
this.selectIdsArr = [];
for (const item of this.parArr) {
if (item.id) {
this.selectIdsArr.push(item.id);
}
}
},
},
}
</script>
总结
以上是小编给大家分享的vue动态循环出的多个select出现过的变为disabled效果，希望对大家有所帮助！
上一篇：node后端服务保活的实现