vue动态循环出的多个select出现过的变为disabled(实例代码)

vue动态循环出的多个select出现过的变为disabled<template><divclass="artcle"><el-formlabel-wid

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效果，希望对大家有所帮助！