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